您的位置：首页 > Web前端 > JavaScript

JavaScript实现动画效果

2016-03-10 22:41 483 查看

　　说到JavaScript实现动画效果，不得不想到两个函数，setTimeout和setInterval。

　　 setTimeout的常用的使用方法为 setTimeout(callback, delay)，setInterval常用的使用方法为setInterval(callback, delay)

　　两者的区别

　　

setTimeout(function repeat(){
/* Some Long block of code... */
setTimeout(repeat, 10)
}, 10)
setInterval(function(){
/* Some Long block of code... */
}, 10)

　　这两个函数看起来功能似乎是相同的，但实际上并不是。值得注意的是，在setTimeout()的代码中，要在前一个callback回调执行结束并延迟10秒（可能更多但不会更少）以后，才能再执行setTimeout()。而setInterval则是每隔10ms去尝试执行callback回调，而不关注上一个callback是合适执行的。如果setInterval的回调函数还没结束，那么这一次的回调就会被延迟执行到下一次可用的时间点上。如果一直被延迟，到最后，Interval间隔定时器可能会无延期执行。

　　下面我使用setTimeout，不设置setTimeout的延迟时间来实现一个动画效果。

　　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id="box" style="position: relative;">hello!</div>
<script type="text/javascript">
var timers = {
timerID : 0,
timers : [],

add : function(fn){
this.timers.push(fn);
},

start: function(){
if (this.timerID) return;
(function runNext() {
if(timers.timers.length > 0){
for (var i = 0; i < timers.timers.length; i++){
if(timers.timers[i]() === false){
timers.timers.splice(i,1);
}
}
timers.timerID = setTimeout(runNext, 0);
}
})();
},
stop : function(){
clearTimeout(this.timerID);
this.timerID = 0;
}
};

var box = document.getElementById("box"),x = 0, y = 20;
timers.add(function(){
box.style.left = x + "px";
if ( ++x > 50) return false;
});

timers.add(function(){
box.style.top = y + "px";
y += 2;
if (y > 120) return false;
});

timers.start();
</script>
</body>
</html>

　　学习来自于《JavaScript忍着秘籍》

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航