说到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. Linux入门(7)——Ubuntu16.04安装wps并解决系统缺失字体问题

    进入WPS官网下载deb包: http://linux.wps.cn/ 安装,打开终端: cd 下载 ~a21_amd64.deb 解决打开WPS时出现的系统缺失字体问题: 下载 https://pa ...

  2. angular.js基础

    内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突.首先从一些常见的内置指令开始.先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用 ...

  3. （转）MySQL存储过程/存储过程与自定义函数的区别

    转自:http://www.cnblogs.com/caoruiy/p/4486249.html 语法: 创建存储过程: CREATE [definer = {user|current_user}]  ...

  4. Javascript里的if判断与逻辑运算符(||, &&)和比较运算符的特别之处

    写JS时不可避免要用到 if 与 逻辑运算符( ||, &&). 如果你经常阅读Js的第三方组件源码, 会发现有一种写法作为初始化变量的方法经常出现. var variable = v ...

  5. git合并代码解决冲突

    一直测试的我,之前有接触过git命令,但是没有详细的去看这些命令的意思,只是背着在用,今天一时兴起,看到了廖雪峰的git方面的博客<a href="https://www.liaoxu ...

  6. hibernate的session详解

  7. JavaScript 中的对象引用

    ECMAScirpt 变量有两种不同的数据类型:基本类型,引用类型.也有其他的叫法,比如原始类型和对象类型,拥有方法的类型和不能拥有方法的类型,还可以分为可变类型和不可变类型,其实这些叫法都是依据这两 ...

  8. C# Post和Get请求

    Get请求: /// <summary> /// 调用ToxyzAPI /// </summary> /// <param name="requetid&quo ...

  9. 区分window8中 ie10 window phone8

    Internet Explorer 10 并没有对 屏幕的宽度 和 视口(viewport)的宽度 进行区分   @-webkit-viewport   { width: device-width; ...

  10. JAVAscript学习笔记 jsDOM 第五节 （原创） 参考js使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...