JS實現多物體運動的方法詳解-js教程-PHP中文網

首頁

web前端

js教程

JS實現多物體運動的方法詳解

韦小宝

Jan 24, 2018 am 09:55 AM

javascript 方法詳解

這篇文章主要介紹了JS實現多物體運動的方法,結合實例形式較為詳細的分析了javascript實現多物體運動的原理與相關操作技巧,對JavaScript感興趣的朋友可以參考下本篇文章

本文實例分析了JS實作多物體運動的方法。分享給大家供大家參考，具體如下：

基本步驟

#1.透過getElementsByTagName取得到要做多物體運動的元素
2.然後for循環遍歷元素，加入事件
3.定義startMove函數，需要兩個參數，當前「做運動」的元素，和目標值target

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

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      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个参数
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

登入後複製

#問題：

##當移入移出速度比較快的時候，就會出現有的li回不到原來的樣子，卡在半路了；

這是因為所有的li公用了一個定時器造成的；# #當滑鼠移入第一個li時，呼叫startMove開啟一個計時器；滑鼠移除li時，也需要開啟一個計時器讓li回到原來的位置，li走到半路上，我們移入第二個li，首先會清除定時器，這時候第一個li就卡到半路了。

解決這個問題：

讓每個li擁有自己的timer去控制他們的變化，在for迴圈的時候，給每個裡定義自己的一個timer

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

登入後複製

接著在starMove裡面每次用的計時器都是當前li 自己的，就不會互相干擾了。

這裡由之前的timer變成了

obj.timer

(目前物件自己的timer)；到這裡就沒問題了。完整程式碼如下：

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

登入後複製

加上點樣式：

<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(&#39;li&#39;);
      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+&#39;px&#39;;
        }
      },30);
    }
</script>

登入後複製

接著在看一個例子：多物體移動-改變透明度

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    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在多物体运动里 不能公用
  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 = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

登入後複製

以上就是這篇文章的所有內容，希望對大家學習JavaScript提供到幫助！！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

怎麼在番茄免費小說app中寫小說分享番茄小說寫小說方法教程 Mar 28, 2024 pm 12:50 PM

番茄小說是一款非常熱門的小說閱讀軟體，我們在番茄小說中經常會有新的小說和漫畫可以去閱讀，每一本小說和漫畫都很有意思，很多小伙伴也想著要去寫小說來賺取賺取零用錢，在把自己想要寫的小說內容編輯成文字，那麼我們要怎麼樣在這裡面去寫小說呢?小伙伴們都不知道，那就讓我們一起到本站本站中花點時間來看寫小說的方法介紹。分享番茄小說寫小說方法教學　　1、先在手機上打開番茄免費小說app，點擊個人中心——作家中心　　2、跳到番茄作家助手頁面——點擊創建新書在小說的結

七彩虹主機板怎麼進入bios？教你兩種方法 Mar 13, 2024 pm 06:01 PM

　　七彩虹主機板在中國國內市場享有較高的知名度和市場佔有率，但是有些七彩虹主機板的用戶還不清楚怎麼進入bios進行設定呢？針對這一情況，小編專門為大家帶來了兩種進入七彩虹主機板bios的方法，快來試試吧！方法一：使用u盤啟動快捷鍵直接進入u盤裝系統七彩虹主機板一鍵啟動u盤的快捷鍵是ESC或F11，首先使用黑鯊裝機大師製作一個黑鯊U盤啟動盤，然後開啟電腦，當看到開機畫面的時候，連續按下鍵盤上的ESC或F11鍵以後將會進入到一個啟動項順序選擇的窗口，將遊標移到顯示“USB”的地方，然

微信刪除的人如何找回（簡單教學告訴你如何恢復被刪除的聯絡人） May 01, 2024 pm 12:01 PM

而後悔莫及、人們常常會因為一些原因不小心刪除某些聯絡人、微信作為一款廣泛使用的社群軟體。幫助用戶解決這個問題，本文將介紹如何透過簡單的方法找回被刪除的聯絡人。 1.了解微信聯絡人刪除機制這為我們找回被刪除的聯絡人提供了可能性、微信中的聯絡人刪除機制是將其從通訊錄中移除，但並未完全刪除。 2.使用微信內建「通訊錄恢復」功能微信提供了「通訊錄恢復」節省時間和精力，使用者可以透過此功能快速找回先前刪除的聯絡人，功能。 3.進入微信設定頁面點選右下角，開啟微信應用程式「我」再點選右上角設定圖示、進入設定頁面，，

手機版龍蛋孵化方法大揭密（一步一步教你如何成功孵化手機版龍蛋） May 04, 2024 pm 06:01 PM

手機遊戲成為了人們生活中不可或缺的一部分，隨著科技的發展。它以其可愛的龍蛋形象和有趣的孵化過程吸引了眾多玩家的關注，而其中一款備受矚目的遊戲就是手機版龍蛋。幫助玩家們在遊戲中更好地培養和成長自己的小龍，本文將向大家介紹手機版龍蛋的孵化方法。 1.選擇合適的龍蛋種類玩家需要仔細選擇自己喜歡並且適合自己的龍蛋種類，根據遊戲中提供的不同種類的龍蛋屬性和能力。 2.提升孵化機的等級玩家需要透過完成任務和收集道具來提升孵化機的等級，孵化機的等級決定了孵化速度和孵化成功率。 3.收集孵化所需的資源玩家需要在遊戲中

手機字體大小設定方法（輕鬆調整手機字體大小） May 07, 2024 pm 03:34 PM

字體大小的設定成為了重要的個人化需求，隨著手機成為人們日常生活的重要工具。以滿足不同使用者的需求、本文將介紹如何透過簡單的操作，提升手機使用體驗，調整手機字體大小。為什麼需要調整手機字體大小-調整字體大小可以使文字更清晰易讀-適合不同年齡段用戶的閱讀需求-方便視力不佳的用戶使用手機系統自帶字體大小設置功能-如何進入系統設置界面-在在設定介面中找到並進入"顯示"選項-找到"字體大小"選項並進行調整第三方應用調整字體大小-下載並安裝支援字體大小調整的應用程式-開啟應用程式並進入相關設定介面-根據個人

快速掌握：華為手機開啟兩個微信帳號方法大揭密！ Mar 23, 2024 am 10:42 AM

在現今社會，手機已經成為我們生活中不可或缺的一部分。而微信作為我們日常溝通、工作、生活的重要工具，更是經常被使用。然而，在處理不同事務時可能需要分開兩個微信帳號，這就要求手機能夠支援同時登入兩個微信帳號。華為手機作為國內知名品牌，很多人使用，那麼華為手機開啟兩個微信帳號的方法是怎麼樣的呢？下面就來揭秘一下這個方法。首先，要在華為手機上同時使用兩個微信帳號，最簡

Oracle SQL中的除法運算詳解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算