说到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. LeetCode 455. Assign Cookies （分发曲奇饼干）

    Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...

  2. python中openpyxl的用法【安装,以及一些基本的操作】

    概述 Openpyxl是python中简单易用的操作excel电子表格的一个模块.接下来呢,跟博主一起学习一下吧  ----_<_>_---- 首先先清楚一些excel的基本概念: 在op ...

  3. Spring Cloud官方文档中文版-Spring Cloud Config（下）-客户端等

    官方文档地址为:http://cloud.spring.io/spring-cloud-static/Dalston.SR2/#_serving_alternative_formats 文中例子我做了 ...

  4. Codeforces Round #383 (Div. 2) B. Arpa’s obvious problem and Mehrdad’s terrible solution

    B. Arpa’s obvious problem and Mehrdad’s terrible solution time limit per test 1 second memory limit ...

  5. HDU 4267 A Simple Problem with Integers（树状数组区间更新）

    A Simple Problem with Integers Time Limit: 5000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  6. 网络基础四 DNS DHCP 路由 FTP

    第1章 网络基础 1.1 IP地址分类 IP地址的类别-按IP地址数值范围划分 IP地址的类别-按IP地址用途分类 IP地址的类别-按网络通信方式划分 1.2 局域网上网原理过程 DHCP原理过程详情 ...

  7. Hadoop部署配置文件

    为了方便大家修,我把要修改的地方标红了,找到对应文件,复制粘贴过去就可以了 注:这个是我安装的Hadoop的配置,要根据我之前发的文章配置才行, 里面有一些东西比如文件夹名称,路径不一样,稍加修改也可 ...

  8. 【转载】以Java的视角来聊聊SQL注入

    以Java的视角来聊聊SQL注入 原创 2017-08-08 javatiku Java面试那些事儿 在大二就接触过sql注入,之前一直在学习windows逆向技术,认为web安全以后不是自己的从业方 ...

  9. AngularJS学习篇（五）

    AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope ...

  10. float 浮动

    浮动最开始的目的是为了让文字环绕图片(一个图片和多行文字对齐)   1.包裹性:元素添加 float 属性之后 自动变成 inline-block 元素,能设置 宽高 2.破坏性:破坏自身高度,还会使 ...