javascript關於運動的各種問題經典總結
本文實例總結了javascript關於運動的各種問題。分享給大家供大家參考。具體如下：
一、JS運動的各種問題
問題一：
錯誤代碼：
?
1 2 3 4 5 6 7 8 9 10 11 function startMove(){ var timer=null; var div1=document.getElementById("div1"); if (div1.offsetLeft==300){ clearInterval(timer); }else{ timer=setInterval(function(){ div1.style.left=div1.offsetLeft+10+"px"; },30) } }希望實現的功能：
打開定時器timer，讓div1運動到300px，然後讓div1停下即關掉定時器。
錯誤之處：
if語句錯誤，代碼首先設置一個null定時器timer，然後如果div1的左邊距為300px，則關掉定時器timer。否則一直運動。但是if並不是循環語句，if語句執行一次之後將不再執行。所以永遠不會關閉定時器。
正確代碼：
?
1 2 3 4 5 6 7 8 9 10 var timer=null; function startMove(){ var div1=document.getElementById("div1"); timer=setInterval(function(){ if (div1.offsetLeft==300){ clearInterval(timer); } div1.style.left=div1.offsetLeft+10+"px"; },30) }問題二:
錯誤代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 function startMove(){ var speed=1; var timer=null; var oDiv1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ if (oDiv1.offsetLeft>=300){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30) }希望實現的功能：
連續點擊開始按鈕，div1會加速，這是因為每當點擊按鈕一次，就會開啟一個定時器，累積起來就會加速，所以要在開啟定時器之前不管有沒有定時器開啟都要先關閉一次定時器。但是添加了關閉定時器的clearInterval方法之後，依然會加速。
錯誤之處：
將timer變量放在了startMove方法裡面，相當於每點擊一次按鈕，就會執行一次startMove方法，生成了一個閉包，因此創建了一個局部timer，每一個閉包當中的timer並不會共享，所以還是相當於生成了點擊次數的閉包timer。
正確代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 var timer=null; function startMove(){ var speed=1; var oDiv1=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ if (oDiv1.offsetLeft>=300){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30) }實現分享欄進出功能：
代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 150px; height: 200px; background: burlywood; position: absolute; left: -150px; } span{ width: 20px; height: 60px; position: absolute; background: gold; right: -20px; top: 70px; } </style> <script> window.onload=function(){ var oDiv1=document.getElementById("div1"); oDiv1.onmouseover=function(){ move(0); }; oDiv1.onmouseout=function(){ move(-150); }; }; var timer=null; function move(target){ var oDiv1=document.getElementById("div1"); var speed=0; if (oDiv1.offsetLeft<target){ speed=10; }else{ speed=-10; } clearInterval(timer); timer=setInterval(function(){ if(oDiv1.offsetLeft==target){ clearInterval(timer); }else{ oDiv1.style.left=oDiv1.offsetLeft+speed+"px"; } },30); } </script> </head> <body> <div id="div1"> <span id="span1">分享到</span> </div> </body> </html>實現圖片淡入淡出功能：
代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 200px; height: 200px; background: red; position: absolute; filter: alpha(opacity:30); opacity: 0.3; } </style> <script> window.onload=function(){ var oDiv1=document.getElementById("div1"); oDiv1.onmouseover=function(){ move(100); }; oDiv1.onmouseout=function(){ move(30); }; }; var timer=null; var alpha=30; function move(target){ var oDiv1=document.getElementById("div1"); var speed=0; clearInterval(timer); if(alpha<target){ speed=10; }else{ speed=-10; } timer=setInterval(function(){ if (alpha==target){ clearInterval(timer); }else{ alpha+=speed; oDiv1.style.filter="alpha(opacity:"+alpha+")"; oDiv1.style.opacity=alpha/100; } },30); }; </script> </head> <body> <div id="div1"> </div> </body> </html>注意點：
1.因為在透明度上JavaScript並沒有像左邊距(offsetLeft)這樣的屬性。所以用一個alpha變量代替。
2.JavaScript代碼中的行間透明度設置上需要考慮浏覽器的兼容問題，ie浏覽器設置方法為oDiv1.style.filter="aplha(opacity:"+aplha+")";
chrome和火狐為oDiv1.style.opacity=alpha/100。
實現滾動條事件：
代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 100px; height: 100px; background: yellowgreen; position: absolute; bottom: 0px; right: 0px; } </style> <script> window.onscroll=function(){ var oDiv=document.getElementById("div1"); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop); }; var timer=null; function move(target){ var oDiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=(target-oDiv.offsetTop)/10; 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>二、JS多物體運動的各種問題
問題一：
希望實現的功能：三個平行div自由的平行縮放。
代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 50px; background: yellow; margin: 10px; } </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for (var i=0;i<oDiv.length;i++){ oDiv[i].timer=null; oDiv[i].onmouseover=function(){ move(300,this); }; oDiv[i].onmouseout=function(){ move(100,this); }; } }; function move(iTarget,oDiv){ clearInterval(oDiv.timer); oDiv.timer=setInterval(function(){ var speed=(iTarget-oDiv.offsetWidth)/5; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (iTarget==oDiv.offsetWidth){ clearInterval(oDiv.timer); }else{ oDiv.style.width=oDiv.offsetWidth+speed+"px"; } },30); } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>注意事項：
多物體運動如果只是設置一個定時器(設置全局定時器)的話，那麼三個div共用一個一個全局定時器，那麼當一個div沒有完成縮小動作的時候另一個div開啟定時器執行伸展動作，由於定時器是全局的，那麼上一個div的定時器將被覆蓋即取消掉，故上一個定時器無法完全地昨晚縮小動作，解決辦法是給每一個div設置一個屬性timer。
問題二：
希望實現的功能：多圖片的淡入淡出。
代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; margin: 10px; background: yellow; float: left; filter: alpha(opacity:30); opacity: 0.3; } </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ oDiv[i].timer=null; oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ move(100,this); }; oDiv[i].onmouseout=function(){ move(30,this); }; } }; function move(iTarget,obj){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(iTarget-obj.alpha)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (obj.alpha==iTarget){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter="alpha(opacity:"+obj.alpha+")"; obj.style.opacity=obj.alpha/100; } },30); } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>希望實現的功能：多物體不同方向的伸縮功能。
代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; margin: 10px; background: yellow; float: left; border: 10px solid black; } </style> <script> window.onload=function(){ var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); oDiv1.timer=null; oDiv2.timer=null; oDiv1.onmouseover=function(){ move(this,400,'height'); }; oDiv1.onmouseout=function(){ move(this,100,'height'); }; oDiv2.onmouseover=function(){ move(this,400,'width'); }; oDiv2.onmouseout=function(){ move(this,100,'width'); }; }; function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }; function move(obj,iTarget,name){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=parseInt(getStyle(obj,name)); var speed=(iTarget-cur)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget){ clearInterval(obj.timer); }else{ obj.style[name]=cur+speed+"px"; } },30); }; </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>注意事項：
1.offsetwidth所獲得的並不只是物體的純寬度，還有物體的變寬以及外邊距。那麼在obj.style.width=obj.offsetwidth-1+"px";這句中，本意是希望圖片縮小以1px的速度勻速縮小，但是如果將邊框的寬度設置為1px而非0px，那麼offsetwidth的值其實是obj的width(注意：不是style.width即不是行間的width)+2，上面這句變成了obj.style.width=obj的width+2-1+“px”;圖像反而增大了。解決的辦法就是不用offsetwidth，而用obj的width。width通過getStyle方法獲得。
2.getStyle方法得到的是string。需要用parseint強制轉換成數字類型。
完整的運動框架：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 200px; height: 200px; margin: 20px; background: yellow; border: 5px solid black; filter: alpha(opacity:30); opacity: 0.3; } </style> <script> window.onload=function(){ var oDiv1=document.getElementById('div1'); oDiv1.timer=null; oDiv1.onmouseover=function(){ move(this,100,'opacity'); }; oDiv1.onmouseout=function(){ move(this,30,'opacity'); }; }; function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }; function move(obj,iTarget,name){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=0; if(name=='opacity'){ cur=Math.round(parseFloat(getStyle(obj,name))*100); }else{ cur=parseInt(getStyle(obj,name)); } var speed=(iTarget-cur)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget){ clearInterval(obj.timer); }else{ if(name=='opacity'){ obj.style.opacity=(cur+speed)/100; obj.style.filter='alpha(opacity:'+cur+speed+')'; }else{ obj.style[name]=cur+speed+"px"; } } },30); }; </script> </head> <body> <div id="div1"></div> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。