JS實現多物體運動實例分享-js教程-PHP中文網

首頁

web前端

js教程

JS實現多物體運動實例分享

小云云

Jan 24, 2018 am 09:02 AM

javascript 分享實例

本文主要介紹了JS實現多物體運動的方法,結合實例形式較為詳細的分析了javascript實現多物體運動的原理與相關操作技巧,需要的朋友可以參考下，希望能幫助到大家，

基本步驟

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>

登入後複製

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7926

Java教學

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1250

Related knowledge

夸克網盤怎麼分享到百度網盤？ Mar 14, 2024 pm 04:40 PM

　　夸克網盤和百度網盤都是很便利的儲存工具，不少的用戶都在詢問這兩款軟體互通嗎？夸克網盤怎麼分享到百度網盤？下面就讓本站來為用戶們來仔細的介紹一下夸克網盤的文件怎麼保存到百度網盤方法吧。夸克網盤的文件怎麼保存到百度網盤方法1、想要知道怎麼把夸克網盤的文件轉到百度網盤，首先在夸克網盤上下載需要保存的文件，然後打開百度網盤客戶端後，選擇壓縮檔案要儲存的資料夾，雙擊開啟該資料夾。　　2、開啟該資料夾後，點選視窗左上角區域的「上傳」。　　3、在電腦中找到需要上傳的壓縮文件，點選選

網路易雲音樂怎麼分享到微信朋友圈_網易雲音樂分享到微信朋友圈教程 Mar 25, 2024 am 11:41 AM

1.首先我們進入到網易雲音樂中，然後在軟體首頁介面中，點選進入到歌曲的播放介面中。 2.然後在歌曲播放介面中，找到右上方的分享功能按鈕，如下圖紅框所示位置，點擊選擇分享的管道;在分享管道中，點擊底部的「分享至」選項，然後選擇第一個“微信朋友圈”，即可將內容分享至微信朋友圈。

百度網盤怎麼分享文件給好友 Mar 25, 2024 pm 06:52 PM

近期，百度網盤安卓客戶端迎來了全新的8.0.0版本，這個版本不僅帶來了許多變化，還增添了許多實用功能。其中，最引人注目的便是資料夾共享功能的增強。現在，使用者可以輕鬆邀請好友加入，共同分享工作與生活中的重要文件，實現更便利的協作與分享。那麼究竟該如何分享給好友自己需要分享的文件呢，下文中本站小編就會為大家帶來詳細內容介紹，希望能幫助大家！ 1）開啟百度雲APP，先點選在首頁選擇相關的資料夾，再點選介面右上角的【...】圖示；（如下圖）2）接著點選「共用成員」一欄中的【+ 】，最後在勾選所

芒果tv會員帳號分享2023 Feb 07, 2024 pm 02:27 PM

芒果TV擁有各種類型的電影、電視劇、綜藝等資源，用戶可以在其中自由的選擇觀看。芒果tv會員不僅能夠看到全部的VIP劇而且還能夠設定最高清的畫質，幫助用戶爽快看劇，下面小編就給大家帶來一些芒果tv免費的會員帳號供用戶們使用，趕緊來看一看吧。芒果tv最新會員帳號免費分享2023：注意：都是收集的最新會員帳號，可以直接登入使用，不要隨意的修改密碼。帳號：13842025699密碼：qds373帳號：15804882888密碼：evr6982帳號：13330925667密碼：jgqae帳號：1703

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

解決Discuz微信分享無法顯示的問題 Mar 09, 2024 pm 03:39 PM

標題：解決Discuz微信分享無法顯示的問題，需要具體程式碼範例隨著行動網路的發展，微信成為了人們日常生活中不可或缺的一部分。在網站開發中，為了提升使用者體驗和擴大網站的曝光度，許多網站會整合微信分享功能，讓使用者能夠輕鬆分享網站的內容到朋友圈或微信群組。然而，有時在使用Discuz等開源論壇系統時，會遇到微信分享無法顯示的問題，這給使用者體驗帶來了一定的困

如何分享ppt Mar 20, 2024 pm 07:51 PM

職場人士對PPT製作不會太陌生吧，因為不管是年終總結還是述職報告很多公司都要求用PPT的形式來體現。此時就遇到一個問題，那就是如何分享PPT呢？不要急，下面小編帶大家了解分享PPT的方法。 1.先選擇編輯好的PPT，點選左上角的儲存（如果使用的是WPS，可以先點選登入）。 2.接著點擊下圖選單列的分享圖標，如下圖所示。 3、然後會彈出下圖的分享介面，可以看到會出現一個分享鏈接，點擊發送鏈接即可分享。 4.還可以點擊下圖左下角的“允許好友編輯”，這樣好友也可以點擊編輯這個PPT了。 5.如果需要給P

學習Golang指標轉換的最佳實務範例 Feb 24, 2024 pm 03:51 PM

Golang是一門功能強大且高效的程式語言，可用於開發各種應用程式和服務。在Golang中，指標是一種非常重要的概念，它可以幫助我們更靈活和有效率地操作資料。指標轉換是指在不同類型之間進行指標操作的過程，本文將透過具體的實例來學習Golang中指標轉換的最佳實踐。 1.基本概念在Golang中，每個變數都有一個位址，位址就是變數在記憶體中的位置。

See all articles

JS實現多物體運動實例分享

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題