JS运动基础
offsetLeft、offsetTop：包含了margin
offsetWidth、offsetHeight：盒模型尺寸，包括了padding、border的尺寸，如200px的div，border为1，padding为10，那么offsetWidth实际上是为222px
scrollTop
让一个div每隔30毫秒向左移动30px
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:200px; height:200px; background:red; position:absolute; left:0; top:50px;} </style> </head> <body> <div id="div1"></div> <script> setInterval(function(){ var oDiv = document.getElementById("div1"); oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; },30); </script> </body>
注意offsetLeft为元素距离屏幕的左边距。
无缝滚动
利用移动，我们可以做一个无缝滚动的小控件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{margin:0; padding:0;} .scrollList{width:400px; height:100px; margin:0px auto; margin-top:50px; overflow:hidden; position:relative; background:black;} .scrollList > ul{position:absolute; left:0; top:0;} .scrollList > ul > li{width:100px; height:100px; float:left; list-style:none;} </style> </head> <body> <div class="scrollList" id="div1"> <ul> <li style="background:red;"></li> <li style="background:green;"></li> <li style="background:blue;"></li> <li style="background:green;"></li> </ul> </div> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName("ul")[0]; var aLi = oUl.getElementsByTagName("li"); oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; setInterval(function(){ if(oUl.offsetLeft < -oUl.offsetWidth / 2){ oUl.style.left = '0'; } oUl.style.left = oUl.offsetLeft - 2 + 'px'; },30); }; </script> </body> </html>
上面的移动是从右向左滚，如果我们想从左往右滚呢？
<script> window.onload = function(){ var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName("ul")[0]; var aLi = oUl.getElementsByTagName("li"); oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; setInterval(function(){ if(oUl.offsetLeft < -oUl.offsetWidth / 2){ oUl.style.left = '0'; } if(oUl.offsetLeft > 0){ oUl.style.left = -oUl.offsetWidth / 2 + 'px'; } oUl.style.left = oUl.offsetLeft + 2 + 'px'; },30); }; </script>
当鼠标进入的时候滚动会停止，移出的时候继续移动
<script> window.onload = function(){ var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName("ul")[0]; var aLi = oUl.getElementsByTagName("li"); var timer = null; oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; function move(){ if(oUl.offsetLeft < -oUl.offsetWidth / 2){ oUl.style.left = '0'; } if(oUl.offsetLeft > 0){ oUl.style.left = -oUl.offsetWidth / 2 + 'px'; } oUl.style.left = oUl.offsetLeft + 2 + 'px'; } timer = setInterval(move,30); oDiv.onmouseover = function(){ clearInterval(timer); }; oDiv.onmouseout = function(){ timer = setInterval(move,30); }; }; </script>
最后我们再加上按钮控制整个滚动的方向
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{margin:0; padding:0;} .scrollList{width:400px; height:100px; margin:0px auto; margin-top:50px; overflow:hidden; position:relative; background:black;} .scrollList > ul{position:absolute; left:0; top:0;} .scrollList > ul > li{width:100px; height:100px; float:left; list-style:none;} </style> </head> <body> <input type="button" value="Left" id="btnL" /> <input type="button" value="Right" id="btnR" /> <div class="scrollList" id="div1"> <ul> <li style="background:red;"></li> <li style="background:green;"></li> <li style="background:blue;"></li> <li style="background:green;"></li> </ul> </div> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); var oUl = oDiv.getElementsByTagName("ul")[0]; var aLi = oUl.getElementsByTagName("li"); var timer = null; var btnL = document.getElementById("btnL"); var btnR = document.getElementById("btnR"); var speed = 2; oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; function move(){ if(oUl.offsetLeft < -oUl.offsetWidth / 2){ oUl.style.left = '0'; } if(oUl.offsetLeft > 0){ oUl.style.left = -oUl.offsetWidth / 2 + 'px'; } oUl.style.left = oUl.offsetLeft + speed + 'px'; } timer = setInterval(move,30); oDiv.onmouseover = function(){ clearInterval(timer); }; oDiv.onmouseout = function(){ timer = setInterval(move,30); }; btnL.onclick = function(){ if(speed > 0){ speed = -speed; } }; btnR.onclick = function(){ if(speed < 0){ speed = -speed; } }; }; </script> </body> </html>
=======================更新与2015年12月25日==================
回到让div运动的例子，现在我们还要做几件事情：
1.让div能够在指定的地方停下来
2.鼠标点击后保证只有一个定时器在执行（在运动开始时，关闭已有定时器）
3.把运动和停止隔开
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:200px; height:200px; background:red; position:absolute; top:50px; left:0;} </style> <script> var timer = null; function startMove(){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 10; if(oDiv.offsetLeft >= 300){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + speed +'px'; } },30); } </script> </head> <body> <input id="btn1" type="button" value="animate" onclick="startMove()" /> <div id="div1"></div> </body> </html>
分享到
我们可以把这个例子的思维运用到我们经常在网页上看到的“分享到”按钮
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:150px; height:200px; background:green; position:absolute; left:-150px;} #div1 span{position:absolute;width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;} </style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0,10); }; oDiv.onmouseout = function(){ startMove(-150,-10); }; }; var timer = null; function startMove(target,speed){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft == target){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + speed +'px'; } },30); } </script> </head> <body> <div id="div1"> <span>分享到</span> </div> </body> </html>
我们可以把speed参数去掉，因为speed参数是不必要的，就像我们打车去一个目的地，我们不会告诉司机要用多快的速度开车。我们修改一下startMove()就好。
function startMove(target){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > target){ speed = -10; }else{ speed = 10; } if(oDiv.offsetLeft == target){ clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + speed +'px'; } },30); }
淡入淡出图片
现在我们可以把这个思维用在淡入淡出的图片上面，鼠标移入，透明度变成100%，鼠标移出，透明度变为原来的透明度。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;} </style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(100); }; oDiv.onmouseout = function(){ startMove(30); }; }; var timer = null; var alpha = 30; function startMove(target){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha < target){ speed = 10; }else{ speed = -10; } if(alpha == target){ clearInterval(timer); }else{ alpha += speed; oDiv.style.filter = 'alpha(opacity:'+ alpha +')'; oDiv.style.opacity = alpha/100; } },30); } </script> </head> <body> <div id="div1"></div> </body> </html>
===============更新与2015年12月27日====================
缓冲运动
div越靠近目的地速度会越慢，直到最后归为0。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </style> <script> window.onload = function(){ }; function startMove(){ var oDiv = document.getElementById("div1"); setInterval(function(){ var speed = (300 - oDiv.offsetLeft)/10; oDiv.style.left = oDiv.offsetLeft + speed +'px'; },30); } </script> </head> <body> <input type="button" onClick="startMove()" value="animate" /> <div id="div1"></div> </body> </html>
但是还有一个小问题，因为速度可能会是一个小数，而js会把小数自动向下取整为整数，这样就不能到达目的地了。所以我们加上一个向上取整和向下取整的判断。
function startMove(){ var oDiv = document.getElementById("div1"); setInterval(function(){ var speed = (300 - oDiv.offsetLeft)/10; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); oDiv.style.left = oDiv.offsetLeft + speed +'px'; },30); }
把这个例子完善一下，最后无论是往左还是往右，都可以实现精确的缓冲运动了。
总结一下
1.距离越远速度越大，速度由距离决定
2.速度=（目标值-当前值）/缩放系数
右侧悬浮框
在有滚动条的窗口中，怎么滚动，div都定位在相同的位置，比如“回到最顶端”按钮就是这么做的。
原理是 用 可视区的高度 减去 div本身的高度 再加上 滚动窗口滚动的距离 ，最后得到的结果就是div在整个窗口（包括非可视区）的顶端距离值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;} </style> <script> window.onscroll = function(){ var oDiv = document.getElementById("div1"); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px'; }; </script> </head> <body style="height:2000px;"> <div id="div1"></div> </body> </html>
把这个思路套入到我们的运动框架之中，就变成了，
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;} </style> <script> window.onscroll = function(){ var oDiv = document.getElementById("div1"); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px'; startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); }; var timer = null function startMove(target){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = (target - oDiv.offsetTop)/6; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(oDiv.offsetTop == target){ clearInterval(timer); }else{ oDiv.style.top = oDiv.offsetTop + speed + 'px'; } },30); } </script> </head> <body style="height:2000px;"> <div id="div1"></div> </body> </html>
对联式悬浮框
把这个例子稍作修改，把div放到屏幕的中间，就像很多网站会用到的那种对联式的广告一样，我们在top的计算方式上稍作修改就能把div投放到屏幕中间高度去，但是这样除以2会出现一个小问题，那就是0.5的问题，计算机对这样的小数又无法确认了，于是就会出现抖动现象，这时候我们使用parseInt()就好了。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #div1{width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;} </style> <script> window.onscroll = function(){ var oDiv = document.getElementById("div1"); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop + 'px'; startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop)); }; var timer = null function startMove(target){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = (target - oDiv.offsetTop)/6; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(oDiv.offsetTop == target){ clearInterval(timer); }else{ oDiv.style.top = oDiv.offsetTop + speed + 'px'; } },30); } </script> </head> <body style="height:2000px;"> <div id="div1"></div> </body> </html>
多物体同时运动
我们放入三个div，让每个div在鼠标移入移出的时候发生宽度上的变化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> div{width:100px; height:50px; background:red; margin:10px;} </style> <script> window.onload = function(){ var aDiv = document.getElementsByTagName('div'); for(var i=0;i<aDiv.length;i++){ aDiv[i].onmouseover = function(){ startMove(this,400); }; aDiv[i].onmouseout = function(){ startMove(this,100); }; } }; var timer = null; function startMove(obj,target){ clearInterval(timer); timer = setInterval(function(){ var speed = (target - obj.offsetWidth)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == target){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth + speed + 'px'; } },30); } </script> </head> <body> <div></div> <div></div> <div></div> </body> </html>
但是这时候会出现一个问题，当我们的鼠标移动的很快，在一个div还没有完成我们期望的动作之前移出鼠标，定时器被清楚，而div的宽度就会固定住。这个时候我们需要开多个定时器来让他们同时工作。
我们在遍历div数组的时候传入this指针，每个this就是一个obj，这样我们可以告诉我们的方法，我们要让哪个obj运动，运动到哪个target，利用object的属性设置，我们把定时器作为对象的一个属性传入到我们的方法当中去，代码如下
<script> window.onload = function(){ var aDiv = document.getElementsByTagName('div'); for(var i=0;i<aDiv.length;i++){ aDiv[i].timer = null; aDiv[i].onmouseover = function(){ startMove(this,400); }; aDiv[i].onmouseout = function(){ startMove(this,100); }; } }; var timer = null; function startMove(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (target - obj.offsetWidth)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == target){ clearInterval(obj.timer); }else{ obj.style.width = obj.offsetWidth + speed + 'px'; } },30); } </script>
这样我们就可以正常跑这个程序了。
现在我们放置四个div，让每个div在鼠标移入移出的时候发生透明度上的变化。同样我们会用到obj.timer的思路
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> div{width:200px; height:200px; background:red; margin:20px; float:left; filter:alpha(opacity:30); opacity:0.3;} </style> <script> window.onload = function(){ var aDiv = document.getElementsByTagName('div'); for(var i=0;i<aDiv.length;i++){ aDiv[i].timer = null; aDiv[i].onmouseover = function(){ startMove(this,100); }; aDiv[i].onmouseout = function(){ startMove(this,30); }; } }; var alpha = 30; function startMove(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (target - alpha)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(alpha == target){ clearInterval(obj.timer); }else{ alpha += speed; obj.style.filter = 'alpha(opacity:' + alpha +')'; obj.style.opacity = alpha/100; } },30); } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
但是运行后发现还是会有冲突，因为alpha只有一个。
在多物体运动应用中，不能有共用的东西。
既然这样，那我们就把alpha也设置成obj的属性：obj.alpha ，这样程序就又能正常跑起来了。
<script> window.onload = function(){ var aDiv = document.getElementsByTagName('div'); for(var i=0;i<aDiv.length;i++){ aDiv[i].timer = null; aDiv[i].alpha = 30; aDiv[i].onmouseover = function(){ startMove(this,100); }; aDiv[i].onmouseout = function(){ startMove(this,30); }; } }; //var alpha = 30; function startMove(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (target - obj.alpha)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.alpha == target){ clearInterval(obj.timer); }else{ obj.alpha += speed; obj.style.filter = 'alpha(opacity:' + obj.alpha +')'; obj.style.opacity = obj.alpha/100; } },30); } </script>
任意值运动
现在我们放入2个div，让其中一个鼠标移入变高，另一个变宽。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> div{width:200px; height:200px; background:yellow; margin:20px; float:left;} </style> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function(){ startMove(this,400); }; oDiv1.onmouseout = function(){ startMove(this,200); }; var oDiv2 = document.getElementById('div2'); oDiv2.onmouseover = function(){ startMove2(this,400); }; oDiv2.onmouseout = function(){ startMove2(this,200); }; }; //var alpha = 30; function startMove(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (target - obj.offsetHeight)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetHeight == target){ clearInterval(obj.timer); }else{ obj.style.height = obj.offsetHeight + speed + 'px'; } },30); } function startMove2(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (target - obj.offsetWidth)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == target){ clearInterval(obj.timer); }else{ obj.style.width = obj.offsetWidth + speed + 'px'; } },30); } </script> </head> <body> <div id="div1">变高</div> <div id="div2">变宽</div> </body> </html>
我们写了2个startMove，这是很不现实的事情，因为我们不可能针对每个运动都写一个新的方法，唯一的方法只能是去优化，抽象。
在此之前，我们先要解决一个问题，那就是offsetWidth和offsetHeight，这两个属性是有兼容性的问题的，所以我们要换掉。
我们使用IE属性getCurrentStyle和Chrome方法getComputedStyle()合成的封装方法getStyle()
function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }
然后我们针对height写一个初步的版本
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> div{width:200px; height:200px; background:yellow; margin:20px; float:left; border:1px solid blue;} </style> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); oDiv1.onmouseover = function(){ startMove(this,400); }; oDiv1.onmouseout = function(){ startMove(this,200); }; /*oDiv2.onmouseover = function(){ startMove(this,400); }; oDiv2.onmouseout = function(){ startMove(this,200); };*/ }; function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function startMove(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = parseInt(getStyle(obj,'height')); var speed = (target - cur)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == target){ clearInterval(obj.timer); }else{ obj.style.height = cur + speed + 'px'; } },30); } </script> </head> <body> <div id="div1">变高</div> <div id="div2">变宽</div> </body> </html>
然后我们再改造一下startMove的参数结构
function startMove(obj,attr,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = parseInt(getStyle(obj,attr)); var speed = (target - cur)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == target){ clearInterval(obj.timer); }else{ obj.style[attr] = cur + speed + 'px'; } },30); }
现在我们使用参数attr来代替属性height，这样attr可以是任意属性比如说width，
这样我们在调用的时候也要加入attr，
startMove(this,'height',400);
记得要加引号
最后我们把之前div2的注释去掉，完整版如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> div{width:200px; height:200px; background:yellow; margin:20px; float:left; border:1px solid blue;} </style> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); oDiv1.onmouseover = function(){ startMove(this,'height',400); }; oDiv1.onmouseout = function(){ startMove(this,'height',200); }; oDiv2.onmouseover = function(){ startMove(this,'width',400); }; oDiv2.onmouseout = function(){ startMove(this,'width',200); }; }; function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function startMove(obj,attr,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur = parseInt(getStyle(obj,attr)); var speed = (target - cur)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == target){ clearInterval(obj.timer); }else{ obj.style[attr] = cur + speed + 'px'; } },30); } </script> </head> <body> <div id="div1">变高</div> <div id="div2">变宽</div> </body> </html>
现在这个框架就很完善了，可以改变大部分的属性，除了。。。。。。最常用的透明度
第一是因为我们在获取的时候使用了parsInt取整，而透明度的值本身只是个小数，第二是因为我们在设置的时候使用了px，而透明度没有px单位。
针对这两种情况，总的思路，我们还是用if...else...判断去写不同情况下的分支，细节方面，parseInt我们要改成parseFloat，而透明度的设置也有不同，IE下是style.filter=alpha(opacity:value)，chrome下是style.opacity=value。于是最终的结果如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> div{width:200px; height:200px; background:yellow; margin:20px; float:left; border:1px solid blue; filter:alpha(opacity:30); opacity:0.3} </style> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function(){ startMove(this,'opacity',100); }; oDiv1.onmouseout = function(){ startMove(this,'opacity',30); }; }; function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function startMove(obj,attr,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ if(attr == 'opacity'){ var cur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ var cur = parseInt(getStyle(obj,attr)); } var speed = (target - cur)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == target){ clearInterval(obj.timer); }else{ if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity:'+ (cur + speed) +')'; obj.style.opacity = (cur + speed)/100; }else{ obj.style[attr] = cur + speed + 'px'; } } },30); } </script> </head> <body> <div id="div1"></div> </body> </html>
注意在代码中我们还特意使用了round()方法，这样做是因为计算机在处理小数的时候会有误差，我们要做一个四舍五入。
现在我们的运动框架就算是告一段落了。
仿Flash图片轮播
http://www.miaov.com/miaov_demo/flash_play/miaov_demo.html
链式运动框架（连续地进行几段运动）
