1、不同的对象调用同一个定时器情况，则需要将定时器的名称定为该对象的一个属性来进行运用。
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 100px; height: 200px; background-color: red; position: absolute; left: -100px; top: 100px; } #div2{ width: 30px; height: 60px; background-color: black; color: white; position: absolute; right: -30px; top: 70px; text-align: center; } #img1{ width: 400px; opacity: 0.3; filter: alpha(opacity=30); margin-left: 200px; } </style> </head> <script> window.onload=function () { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oImg=document.getElementById('img1'); // var iTimer = null; oDiv1.onmouseover=function () { startMove(this,'left',0,10); } oDiv1.onmouseout=function () { startMove(this,'left',-100,-10); } oImg.onmouseover=function () { startMove(this,'opacity',100,10); } oImg.onmouseout=function () { startMove(this,'opacity',30,-10); } // function startMove(obj,iTarget,iSpeed) { // // clearInterval(iTimer ); // // obj.iTimer= setInterval(function () { // if (obj.offsetLeft ==iTarget) { // clearInterval(iTimer); // } else { // obj.style.left = obj.offsetLeft +iSpeed + 'px'; // } // }, 30); // } function startMove(obj,attr,iTarget,iSpeed) { clearInterval(obj.iTimer); var iCur=0; obj.iTimer = setInterval(function () { if(attr=='opacity'){ iCur=Math.round(css(obj,'opacity')*100); }else { iCur=parseInt(css(obj,attr)); } if (iCur ==iTarget) { clearInterval(obj.iTimer ); } else { if(attr=='opacity'){ obj.style.opacity = (iCur+iSpeed)/100; obj.style.filter='alpha(opacity'+(iCur+iSpeed)+')'; }else { obj.style[attr]=iCur+iSpeed+'px'; } } }, 30); } function css(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else { return getComputedStyle(obj,false)[attr]; } } } </script> <body> <div id="div1"> <div id="div2"> 分享到 </div> </div> <img src="5.jpg" id="img1"> </body> </html>
2、同一个对象，不同属性同时调用一个定时器的情况
例： 同时变宽和高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 100px; height: 100px; background-color: red; position: absolute; left: 100px; top: 30px; } </style> </head> <script> window.onload=function () { var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function () { startMove(this,{ 200, height:300 },10); } oDiv1.onmouseout = function () { startMove(this,{ 100, height:100 },-10); } function startMove(obj,json,iSpeed) { clearInterval(obj.iTimer); var iCur=0; obj.iTimer = setInterval(function () { //定时器每走一下，就要把要运动的属性都推进一次 //当所有属性都运动到了目标点的时候停止定时器 var iBtn=true; for(var attr in json){ var iTarget=json[attr]; if(attr=='opacity'){ iCur=Math.round(css(obj,'opacity')*100); }else { iCur=parseInt(css(obj,attr)); } if (iCur !=iTarget) { iBtn=false; if(attr=='opacity'){ obj.style.opacity = (iCur+iSpeed)/100; obj.style.filter='alpha(opacity'+(iCur+iSpeed)+')'; }else { obj.style[attr]=iCur+iSpeed+'px'; } } } //判断是否所有属性都到了目标点 if(iBtn){ clearInterval(obj.iTimer ); } }, 30); } function css(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else { return getComputedStyle(obj,false)[attr]; } } } </script> <body> <div id="div1"></div> </body> </html>
3、同一个对象，不同属性的链式运动---运动回溯
例：连续先变宽，后变高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 100px; height: 100px; background-color: red; position: absolute; left: 100px; top: 30px; } </style> </head> <script> window.onload=function () { var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function () { startMove(this,{ 200 },10,function () { startMove(this,{ height:200 },10); }); } oDiv1.onmouseout = function () { startMove(this,{ height:100 },-10,function () { startMove(this,{ 100 },-10); }); } function startMove(obj,json,iSpeed,fn) { clearInterval(obj.iTimer); var iCur=0; obj.iTimer = setInterval(function () { //定时器每走一下，就要把要运动的属性都推进一次 //当所有属性都运动到了目标点的时候停止定时器 var iBtn=true; for(var attr in json){ var iTarget=json[attr]; if(attr=='opacity'){ iCur=Math.round(css(obj,'opacity')*100); }else { iCur=parseInt(css(obj,attr)); } if (iCur !=iTarget) { iBtn=false; if(attr=='opacity'){ obj.style.opacity = (iCur+iSpeed)/100; obj.style.filter='alpha(opacity'+(iCur+iSpeed)+')'; }else { obj.style[attr]=iCur+iSpeed+'px'; } } } //判断是否所有属性都到了目标点 if(iBtn){ clearInterval(obj.iTimer ); fn&&fn.call(obj); } }, 30); } function css(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else { return getComputedStyle(obj,false)[attr]; } } } </script> <body> <div id="div1"></div> </body> </html>
4、缓冲运动与摩擦运动
区别：摩擦运动：逐渐变慢，最后停止，不一定停到目标点
缓冲运动：1.可以精确的停到指定目标点
2.距离越远，速度越大
速度=（目标值-当前值）/缩放系数
Bug：速度为小数，会进行四舍五入取整
解决办法：值取整
iTimer = setInterval(function () {
oSpeed=(500-oDiv.offsetLeft)/8;
oSpeed=oSpeed>0?Math.ceil(oSpeed):Math.floor(oSpeed);
if (oDiv.offsetLeft == 500) {
clearInterval(iTimer);
} else {
oDiv.style.left = oDiv.offsetLeft +oSpeed + 'px';
}
}, 30);