JS實(shí)現(xiàn)多物體運(yùn)動的方法詳解

本文實(shí)例分析了JS實(shí)現(xiàn)多物體運(yùn)動的方法。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括阿里地區(qū)網(wǎng)站建設(shè)、阿里地區(qū)網(wǎng)站制作、阿里地區(qū)網(wǎng)頁制作以及阿里地區(qū)網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，阿里地區(qū)網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到阿里地區(qū)省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

基本步驟

1.通過getElementsByTagName獲取到要做多物體運(yùn)動的元素
2.然后for循環(huán)遍歷元素，添加事件
3.定義startMove函數(shù)，需要兩個參數(shù)，當(dāng)前“做運(yùn)動”的元素，和目標(biāo)值target

注意問題：在多物體運(yùn)動中，所有的東西不能公用；

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li'); // 第一步
      for(var i=0;i<liTags.length;i++){ // 第二步
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    var timer = null;
    function startMove(obj,iTarget) { // 第三步，2個參數(shù)
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 緩沖運(yùn)動注意取整處理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+'px';
        }
      },30);
    }
</script>

問題：

當(dāng)移入移出速度比較快的時候，就會出現(xiàn)有的li回不到原來的樣子，卡在半路了；這是因?yàn)樗械膌i公用了一個定時器造成的；

當(dāng)鼠標(biāo)移入第一個li時，調(diào)用startMove開啟一個定時器；鼠標(biāo)移除li時，也需要開啟一個定時器讓li回到原來的位置，li走到半路上，我們移入第二個li，首先會清除定時器，這時候第一個li就卡到半路了。

JS實(shí)現(xiàn)多物體運(yùn)動的方法詳解

解決這個問題：讓每個li擁有自己的timer去控制他們的變化，在for循環(huán)的時候，給每個里定義自己的一個timer

liTags[i].timer = null;// 給每個li都添加一個timer

接著在starMove里面每次用的定時器都是當(dāng)前l(fā)i 自己的，就不會互相干擾了。

這里由之前的timer變成了obj.timer (當(dāng)前對象自己的timer)；到這里就沒問題了。

完整代碼如下：

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

加點(diǎn)樣式：

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

完整js代碼

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName('li');
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 給每個li都添加一個timer
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+'px';
        }
      },30);
    }
</script>

接著在看一個例子：多物體運(yùn)動-改變透明度

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName('img');
    for(var i=0;i<aImgs.length;i++){
      aImgs[i].timer = null;
      aImgs[i].alpha = 100; // 把公用的alpha改成每個img對象都有的屬性
      aImgs[i].onmouseover = function () {
        startMove(this,30);
      }
      aImgs[i].onmouseout = function () {
        startMove(this,100);
      }
    }
  }
  // var alpha = 100; 這里alpha在多物體運(yùn)動里 不能公用
  function startMove(obj,iTarget) {
    clearInterval(obj.timer);
    var iSpeed = (iTarget - obj.alpha)/10;
      iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
    obj.timer = setInterval(function(){
      if(obj.alpha == iTarget){
        clearInterval(obj.timer);
      }else{
        obj.alpha += iSpeed;
        obj.style.opacity =obj.alpha/100;
        obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
      }
    },30);
  }
</script>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

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

文章名稱：JS實(shí)現(xiàn)多物體運(yùn)動的方法詳解
本文地址：http://muchs.cn/article36/jpeepg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、營銷型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化