JS實(shí)現(xiàn)小球的彈性碰撞效果
一、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ǔ)知識
其實(shí),我們通過上面的代碼就可以完全實(shí)現(xiàn)一個小球碰撞檢測的功能了。但是僅僅是上面的代碼,還是會存在一定的bug,就是當(dāng)整個網(wǎng)站存在右側(cè)滾動條時,當(dāng)小球碰到屏幕右側(cè)的時候,會出現(xiàn)一瞬的橫向滾動條,這就是做網(wǎng)站比較忌諱的了,橫向滾動條的出現(xiàn)太丑了。所以我們可以通過以下代碼來解決。
//滾動條寬度計(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; }
以上是一個計(jì)算滾動條寬度的函數(shù),此函數(shù)可以計(jì)算右側(cè)滾動條的寬度,我們只需要在“根據(jù)瀏覽器窗口的大小自動調(diào)節(jié)小球的運(yùn)動空間”上面,調(diào)用此函數(shù)
var scrollbarWidth = getScrollbarWidth();
再修改小球的最大運(yùn)動寬度 maxW=window.innerWidth-circles[0].clientWidth-scrollbarWidth
;這樣這個bug就修改好了。
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)小球的彈性碰撞效果 ,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
深入理解Javascript中的循環(huán)優(yōu)化
這篇文章介紹了Javascript中的循環(huán)優(yōu)化,有需要的朋友可以參考一下2013-11-11使用snowfall.jquery.js實(shí)現(xiàn)愛心滿屏飛的效果
這篇文章主要介紹了使用snowfall.jquery.js實(shí)現(xiàn)愛心滿屏飛的效果的相關(guān)資料,需要的朋友可以參考下2017-01-01微信小程序?qū)崿F(xiàn)選項(xiàng)卡的方法
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選項(xiàng)卡的方法,利用swiper組件實(shí)現(xiàn)選項(xiàng)卡功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07bootstrap table實(shí)現(xiàn)點(diǎn)擊翻頁功能 可記錄上下頁選中的行
這篇文章主要介紹了bootstrap table實(shí)現(xiàn)點(diǎn)擊翻頁功能,可記錄上下頁選中的行,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09詳解JavaScript運(yùn)算符中==和===的區(qū)別
在JavaScript中==運(yùn)算符和===運(yùn)算符是經(jīng)常遇到的,那么二者有哪些區(qū)別呢,本文就來和大家進(jìn)行簡單的討論,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)學(xué)習(xí)2023-05-05IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
這篇文章主要介紹了IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法,大家參考使用吧2013-11-11