1.定时器：在js里面，定时器主要有两种，setInterval(function, time) 和 setTimeout（function,time)，
setInterval：每个time秒执行一次函数function
setTimeout：time秒后执行函数，仅且只执行一次
对于定时器的定义主要有三种
setInterval(function(){//第一种 ???alert("定时器");},20);setInterval(fn,20);//第二种setInterval("fn()",20);//第三种function fn(){ ???alert("定时器");}
2.对匀速动画的封装：也就是对定时器的使用，来做动画特效
（1）单向的运动
function animate(obj, target){//obj:选中的属性， target：目标坐标 ???????obj.timer = setInterval(function(){ ???????????if(obj.offsetLeft > target){ ???????????????clearInterval(obj.timer); ???????????} ???????????obj.style.left = obj.offsetLeft +10 +"px"; ???????},30); ???}（2）双向运动，通过比较目标坐标与开始坐标的位置比较决定运动的方向
function animate(obj, target){ ???????var speech = target > obj.offsetLeft ? 5:-5;//判断动画移动的方向 ???????obj.timer = setInterval(function(){ ???????????var result = target - obj.offsetLeft;//判断相差的距离 ???????????obj.style.left = obj.offsetLeft +speech +"px"; ???????????if(Math.abs(result) <= 5) {//相差的距离小于5时，关闭定时器 ???????????????clearInterval(obj.timer); ???????????????obj.style.left = target+"px"; ???????????} ???????},30); ???}2、缓动动画的封装
（1）水平方向的缓动
function animate(obj, target){ ???????clearInterval(obj.timer); ???????obj.timer = setInterval(function(){ ???????????//盒子本身无的位置+步长 ???????????var step = (target - obj.offsetLeft)/10; ???????????step = step > 0 ? Math.ceil(step) : Math.floor(step); ???????????obj.style.left = obj.offsetLeft + step + "px"; ???????????if(obj.offsetLeft == target){ ???????????????clearInterval(obj.timer); ???????????} ???????},30); ???}（2）通过传递属性值实现动画
function animateSingle(obj, attr, target){//attr : 盒子的属性 ???????clearInterval(obj.timer); ???????obj.timer = setInterval(function(){ ???????????//盒子本身无的位置+步长 ???????????//获取到当前样式 ???????????var current = parseInt(getStyle(obj, attr));//去掉px ???????????var step = (target - current)/10; ???????????step = step > 0 ? Math.ceil(step) : Math.floor(step); ???????????//做动画 ???????????obj.style[attr] = current + step + "px"; ???????????if(current == target){ ???????????????clearInterval(obj.timer); ???????????} ???????},30); ???}（3）多个属性的动画
??function animateMoer(obj, json, fn){//json:json格式的数据 {top:200, left:200,width:200} ,fn为回调函数 ???????clearInterval(obj.timer); ???????obj.timer = setInterval(function(){ ???????????var flag = true; ???????????//盒子本身无的位置+步长 ???????????//获取到当前样式 ???????????for(var attr in json){//attr:属性 json[attr]值 ???????????????var current = 0; ???????????????if(attr == "opacity"){ ???????????????????current =parseInt( getStyle(obj, attr)*100); ???????????????}else{ ???????????????????current = parseInt(getStyle(obj, attr));//去掉px ???????????????} ???????????????var step = (json[attr] - current)/10; ???????????????step = step > 0 ? Math.ceil(step) : Math.floor(step); ???????????????//做动画 ???????????????if(attr== "opacity"){// 判断是有opacity ????????????????if("opacity" in obj.style[attr]){//判断是否支持 ????????????????????obj.style.opacity = (current + step)/100; ????????????????}else{//ie6支持 ????????????????????obj.style.filter = "alpha(opacity="+(current + step)+")"; ????????????????} ???????????????}else if(attr == "zIndex"){ ???????????????????obj.style.zIndex = json[attr]; ???????????????} ???????????????else { ???????????????????obj.style[attr] = current + step + "px"; ???????????????} ???????????????if(current != json[attr]){//只要其中一个不满足就不能停止定时器 ???????????????????flag = false; ???????????????????if(fn){ ???????????????????????fn(); ???????????????????} ???????????????} ???????????} ???????????if(flag){ ???????????????clearInterval(obj.timer); ???????????} ???????},30); ???} ???function fn(){alert("good");} ???function getStyle(obj, attr){ ???????if(obj.currentStyle){ ???????????return obj.currentStyle[attr]; ???????} else { ???????????return window.getComputedStyle(obj,null)[attr]; ???????} ???}
js--定时器的学习和对动画的封装（定时器）
原文地址：http://www.cnblogs.com/jiang-z/p/7534081.html