欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2017年11月11日 15:17:16   作者:我吃小月餅  
這篇文章主要介紹了JS實(shí)現(xiàn)小球的彈性碰撞效果 ,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下

一、HTML代碼(body部分)

 <body>
   <!--只需要做一個(gè)大div包裹幾個(gè)小div即可,你想要幾個(gè)小球碰撞就在內(nèi)部做幾個(gè)div即可,這里我們做了6個(gè)小球-->
   <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)動(dòng)起來(lái)*/
    #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)動(dòng)起來(lái)的,我們通過(guò)給小球和它的父元素添加定位,最后用js改變其top、bottom、left、right值來(lái)讓小球運(yùn)動(dòng)?,F(xiàn)在我們小球的樣式已經(jīng)做好了,下面的js代碼才是重中之重。

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

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

//滾動(dòng)條寬度計(jì)算函數(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;
    }

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

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

總結(jié)

以上所述是小編給大家介紹的JS實(shí)現(xiàn)小球的彈性碰撞效果 ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!

相關(guān)文章

最新評(píng)論