我一直在寻找一种方法来向下滚动时单击位于页面顶部的按钮仅使用CSS3.
所以我找到了这个教程:http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
演示:http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
但是由于我只是希望浏览器向下滚动页面顶部的一个按钮向下滚动,所以它有点太高级了,所以我想知道:是否可以在没有输入按钮的情况下进行那些CSS滚动,只是带锚标记?
HTML看起来像这样: <a href="#" class="button">Learn more</a>
我已经有一些CSS需要在按钮点击时触发:
/* Button animation tryout. */
.animate {
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
Run Code Online (Sandbox Code Playgroud) 纯javascript中的任何替代品?
以下适用于歌剧,铬和野生动物园.尚未在资源管理器上测试过:
http://monkey-me.herokuapp.com
https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js
在页面加载时应向下滚动到div'.content':
var destiny = document.getElementsByClassName('content');
var destinyY = destiny[0].offsetTop;
scrollTo(document.body, destinyY, 200);
function scrollTo(element, to, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 2;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
scrollTo(element, to, duration - 2);
}, 10);
};
Run Code Online (Sandbox Code Playgroud) 我有一个在点击(或taphold)上执行的功能,因为我正在使用Cordova.
问题是函数调用Parse.com中的下一个对象来显示其细节,但由于某种原因,它执行该函数两次甚至3次,跳过必须显示的1或2个对象.
我想防止这种情况发生,所以我已经使用了一个标志(布尔值)来指示它是否通过将其设置为true来执行.如果该标志为false,则可以执行该标志并将该标志设置为true.另一个问题是,当我再次调用该函数时,布尔值仍然设置为true,并且不会执行该函数.
因此,我无法在方法内将标志初始化为false,因为它将始终执行.全局变量将在第一次设置为true,并保持其余部分的"生命".
我尝试了第二种方法,使用计数器,并确保如果计数器到达,让我们说0,它可以被执行,但是当它到达结束时我有同样的问题将它设置回0 ..让我们说函数执行了两次,我可以检查计数器是否达到2(通过每次递增)并将其设置回0.然后当下次执行时,它执行3次,所以当检查发生时,如果计数器到达2 ..它被设置回0并且下一次执行(第3次)将再次执行,因为计数器再次为0.
我如何抓住这个或防止这种情况发生?
我做了一个基本的Javascript来告诉你我的意思:
window.addEventListener("load",setup,false);
var counter = 0;
function setup() {
for(var i = 0; i < 3; i++) {
showAlert();
}
}
function showAlert() {
if(counter == 0) {
alert("Executed once");
counter++;
} else if(counter > 2) //counter is bigger than 2, so it got executed more than once {
counter = 0; //reset the counter to 0
}
}
Run Code Online (Sandbox Code Playgroud)
目标是防止函数执行多次(在这种情况下,警报可能不会多次显示).它可以执行两次甚至三次,甚至更多次.我该如何防止这种情况?
谢谢!我对编程知之甚少,但这是我迄今为止从未遇到的事情,所以我不知道如何抓住它并确保它执行一次?