一、HTML代碼（body部分）
<body> <!--只需要做一個大div包裹幾個小div即可，你想要幾個小球碰撞就在內部做幾個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默認的margin和padding部分去掉*/ *{ margin: 0px; padding: 0px; } /*采用定位的方式，讓小球運動起來*/ #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>小球是要運動起來的，我們通過給小球和它的父元素添加定位，最后用js改變其top、bottom、left、right值來讓小球運動。現在我們小球的樣式已經做好了，下面的js代碼才是重中之重。
3.1 Android 事件基礎知識
其實，我們通過上面的代碼就可以完全實現一個小球碰撞檢測的功能了。但是僅僅是上面的代碼，還是會存在一定的bug，就是當整個網站存在右側滾動條時，當小球碰到屏幕右側的時候，會出現一瞬的橫向滾動條，這就是做網站比較忌諱的了，橫向滾動條的出現太丑了。所以我們可以通過以下代碼來解決。
//滾動條寬度計算函數 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; }以上是一個計算滾動條寬度的函數，此函數可以計算右側滾動條的寬度，我們只需要在“根據瀏覽器窗口的大小自動調節小球的運動空間”上面，調用此函數
var scrollbarWidth = getScrollbarWidth(); 再修改小球的最大運動寬度 maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth ;這樣這個bug就修改好了。
總結
以上所述是小編給大家介紹的JS實現小球的彈性碰撞效果 ，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
