溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS如何實現(xiàn)小球的彈性碰撞效果

發(fā)布時間：2021-04-21 10:55:00 來源：億速云 閱讀：172 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)JS如何實現(xiàn)小球的彈性碰撞效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

js的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

一、HTML代碼（body部分） 

 <body>
   <!--只需要做一個大div包裹幾個小div即可，你想要幾個小球碰撞就在內(nèi)部做幾個div即可，這里我們做了6個小球-->
   <div id="main">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
   </div> 
 </body>

　　上面body部分這樣就算是完成了，下面我們給body中的div做一些小樣式。

二、CSS小球樣式部分 

<style type="text/css">
   /*將body默認(rèn)的margin和padding部分去掉*/
   *{
     margin: 0px;
     padding: 0px;
    }
    /*采用定位的方式，讓小球運(yùn)動起來*/
    #main{
      margin: 0px auto;
     position: relative;
   }
   /*小球的樣式*/
   #main div{
     overflow: hidden;
     position: absolute;
     width: 80px;
     height: 80px;
    opacity: 0.5;
     border-radius: 50%;
     background-color: red;
   }
 </style>

 　　小球是要運(yùn)動起來的，我們通過給小球和它的父元素添加定位，最后用js改變其top、bottom、left、right值來讓小球運(yùn)動?，F(xiàn)在我們小球的樣式已經(jīng)做好了，下面的js代碼才是重中之重。

3.1 Android 事件基礎(chǔ)知識

其實，我們通過上面的代碼就可以完全實現(xiàn)一個小球碰撞檢測的功能了。但是僅僅是上面的代碼，還是會存在一定的bug，就是當(dāng)整個網(wǎng)站存在右側(cè)滾動條時，當(dāng)小球碰到屏幕右側(cè)的時候，會出現(xiàn)一瞬的橫向滾動條，這就是做網(wǎng)站比較忌諱的了，橫向滾動條的出現(xiàn)太丑了。所以我們可以通過以下代碼來解決。

//滾動條寬度計算函數(shù)
    function getScrollbarWidth() {
      var oP = document.createElement("p"),
        styles = {
          width: "100px",
          height: "100px",
          overflowY: "scroll"
        }, i, scrollbarWidth;
      for (i in styles) oP.style[i] = styles[i];
      document.body.appendChild(oP);
      scrollbarWidth = oP.offsetWidth - oP.clientWidth;
      oP.remove();
      return scrollbarWidth;
    }

以上是一個計算滾動條寬度的函數(shù)，此函數(shù)可以計算右側(cè)滾動條的寬度，我們只需要在“根據(jù)瀏覽器窗口的大小自動調(diào)節(jié)小球的運(yùn)動空間”上面，調(diào)用此函數(shù)

var scrollbarWidth = getScrollbarWidth(); 再修改小球的最大運(yùn)動寬度   maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ;這樣這個bug就修改好了。

感謝各位的閱讀！關(guān)于“JS如何實現(xiàn)小球的彈性碰撞效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手