javascript關(guān)于運(yùn)動(dòng)的各種問題經(jīng)典總結(jié)

更新時(shí)間：2015年04月27日 09:40:31 作者：親愛的漢尼拔

這篇文章主要介紹了javascript關(guān)于運(yùn)動(dòng)的各種問題,實(shí)例總結(jié)了javascript關(guān)于滾動(dòng)的常見錯(cuò)誤、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例總結(jié)了javascript關(guān)于運(yùn)動(dòng)的各種問題。分享給大家供大家參考。具體如下：

一、JS運(yùn)動(dòng)的各種問題

問題一：

錯(cuò)誤代碼：

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) 
 } 
}

希望實(shí)現(xiàn)的功能：

打開定時(shí)器timer，讓div1運(yùn)動(dòng)到300px，然后讓div1停下即關(guān)掉定時(shí)器。

錯(cuò)誤之處：

if語(yǔ)句錯(cuò)誤，代碼首先設(shè)置一個(gè)null定時(shí)器timer，然后如果div1的左邊距為300px，則關(guān)掉定時(shí)器timer。否則一直運(yùn)動(dòng)。但是if并不是循環(huán)語(yǔ)句，if語(yǔ)句執(zhí)行一次之后將不再執(zhí)行。所以永遠(yuǎn)不會(huì)關(guān)閉定時(shí)器。

正確代碼：

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) 
}

問題二:
錯(cuò)誤代碼：

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) 
}

希望實(shí)現(xiàn)的功能：

連續(xù)點(diǎn)擊開始按鈕，div1會(huì)加速，這是因?yàn)槊慨?dāng)點(diǎn)擊按鈕一次，就會(huì)開啟一個(gè)定時(shí)器，累積起來(lái)就會(huì)加速，所以要在開啟定時(shí)器之前不管有沒有定時(shí)器開啟都要先關(guān)閉一次定時(shí)器。但是添加了關(guān)閉定時(shí)器的clearInterval方法之后，依然會(huì)加速。
錯(cuò)誤之處：
將timer變量放在了startMove方法里面，相當(dāng)于每點(diǎn)擊一次按鈕，就會(huì)執(zhí)行一次startMove方法，生成了一個(gè)閉包，因此創(chuàng)建了一個(gè)局部timer，每一個(gè)閉包當(dāng)中的timer并不會(huì)共享，所以還是相當(dāng)于生成了點(diǎn)擊次數(shù)的閉包timer。

正確代碼：

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) 
}

實(shí)現(xiàn)分享欄進(jìn)出功能：
代碼：

<!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>

實(shí)現(xiàn)圖片淡入淡出功能：
代碼：

<!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>

注意點(diǎn)：

1.因?yàn)樵谕该鞫壬螶avaScript并沒有像左邊距（offsetLeft）這樣的屬性。所以用一個(gè)alpha變量代替。
2.JavaScript代碼中的行間透明度設(shè)置上需要考慮瀏覽器的兼容問題，ie瀏覽器設(shè)置方法為oDiv1.style.filter="aplha(opacity:"+aplha+")"；
chrome和火狐為oDiv1.style.opacity=alpha/100。
實(shí)現(xiàn)滾動(dòng)條事件：
代碼：

<!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多物體運(yùn)動(dòng)的各種問題

問題一：

希望實(shí)現(xiàn)的功能：三個(gè)平行div自由的平行縮放。
代碼：

<!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>

注意事項(xiàng)：

多物體運(yùn)動(dòng)如果只是設(shè)置一個(gè)定時(shí)器（設(shè)置全局定時(shí)器）的話，那么三個(gè)div共用一個(gè)一個(gè)全局定時(shí)器，那么當(dāng)一個(gè)div沒有完成縮小動(dòng)作的時(shí)候另一個(gè)div開啟定時(shí)器執(zhí)行伸展動(dòng)作，由于定時(shí)器是全局的，那么上一個(gè)div的定時(shí)器將被覆蓋即取消掉，故上一個(gè)定時(shí)器無(wú)法完全地昨晚縮小動(dòng)作，解決辦法是給每一個(gè)div設(shè)置一個(gè)屬性timer。

問題二：

希望實(shí)現(xiàn)的功能：多圖片的淡入淡出。
代碼：

<!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>

希望實(shí)現(xiàn)的功能：多物體不同方向的伸縮功能。

代碼：

<!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>

注意事項(xiàng)：

1.offsetwidth所獲得的并不只是物體的純寬度，還有物體的變寬以及外邊距。那么在obj.style.width=obj.offsetwidth-1+"px";這句中，本意是希望圖片縮小以1px的速度勻速縮小，但是如果將邊框的寬度設(shè)置為1px而非0px，那么offsetwidth的值其實(shí)是obj的width（注意：不是style.width即不是行間的width）+2，上面這句變成了obj.style.width=obj的width+2-1+“px”；圖像反而增大了。解決的辦法就是不用offsetwidth，而用obj的width。width通過(guò)getStyle方法獲得。
2.getStyle方法得到的是string。需要用parseint強(qiáng)制轉(zhuǎn)換成數(shù)字類型。

完整的運(yùn)動(dòng)框架：

<!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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: