说到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忍着秘籍》

　　

JavaScript实现动画效果的更多相关文章

  1. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

  2. javascript实现汉诺塔动画效果

    javascript实现汉诺塔动画效果 当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...

  3. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  4. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  5. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  6. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  7. JavaScript实战（带收放动画效果的导航菜单）

    虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...

  8. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  9. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

随机推荐

  1. [SVN服务器搭建] 在myecplise下使用的 tortoise1.9 64位 跟 subversion1.9的服务器使用

    由于在公司经常用到SVN服务器,所以自己也想搭建在本机上面搭建一个SVN服务器玩玩,废话不多说,下面直接贴出来如何搭建的.  一.tortoise1.9 64位下载 直接百度下载即可,百度时候需要显示 ...

  2. JS难点--组件开发

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } span.Apple-tab-span ...

  3. javascript 之作用域-06

    作用域 作用域是指变量和函数可访问范围,他规定了如何查找变量,也就是确定当前执行代码对变量的访问权限. 作用域有两种工作模式: 静态作用域 :又称为词法作用域,在编译阶就可以决定变量的引用,由程序定义 ...

  4. MongoDB监控

    1. mongostat:间隔固定时间获取mongodb的当前运行状态,并输出. 使用示例: D:\Program_Files\MongoDB\bin\mongostat(根据MongoDB的安装目录 ...

  5. phalcon——验证

    一个完整的使用实例:(验证模型数据) use Phalcon\Mvc\Model; use Phalcon\Mvc\Model\Validator\Email as EmailValidator; u ...

  6. LeetCode 110. Balanced Binary Tree （平衡二叉树）

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  7. sqoop1.4.6导出oracle实例

    1.导入odbj6.jar到$SQOOP_HOME/lib目录下. 2.sqoop import --append --connect jdbc:oracle:thin:@219.216.110.12 ...

  8. H - Pair: normal and paranormal URAL - 2019

    If you find yourself in Nevada at an abandoned nuclear range during Halloween time, you’ll become a  ...

  9. Connect the Cities（prim）用prim都可能超时，交了20几发卡时过的

    Connect the Cities Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...

  10. Problem E: 动物爱好者

    Problem E: 动物爱好者 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 882  Solved: 699[Submit][Status][Web ...