JS實現(xiàn)碰撞檢測效果
本文實例為大家分享了JS實現(xiàn)碰撞檢測效果的具體代碼，供大家參考，具體內(nèi)容如下
<head> <meta charset='UTF-8'> <title></title> <style type='text/css'> #all{ width: 500px; height: 500px; border: 2px solid sandybrown; position: relative; margin: 0 auto; } #div1{ width: 50px; height: 50px; background-color: red; position: absolute; } #center{ width: 150px; height: 150px; background-color: black; position: absolute; margin: 175px; } </style></head><body> <div id='all'> <div id='div1'></div> <div id='center'></div> </div> <script type='text/javascript'> var oAll = document.getElementById('all'); var oDiv1 = document.getElementById('div1'); var oCenter = document.getElementById('center'); var maxL = oAll.clientWidth - oDiv1.clientWidth; var maxT = oAll.clientHeight - oDiv1.clientHeight; oDiv1.onmousedown = function(){ var ev = ev || window.event; var lessX = ev.clientX - oDiv1.offsetLeft; var lessY = ev.clientY - oDiv1.offsetTop; document.onmousemove = function(){ var ev = ev || window.event; var posL = ev.clientX - lessX; var posT = ev.clientY - lessY; if(oCenter.offsetLeft-oDiv1.offsetWidth<posL && posL<325 && oCenter.offsetLeft-oDiv1.offsetWidth<posT && posT<325 ){ oCenter.style.backgroundColor = 'red' }else{ oCenter.style.backgroundColor = 'black' } if(posL<0){ posL = 0; } if(posT<0){ posT = 0; } if(posL>maxL){ posL = maxL; } if(posT>maxT){ posT = maxT; } oDiv1.style.left = posL + 'px'; oDiv1.style.top = posT + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; oDiv1.onmousemove = null; } </script></body>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. JavaWeb Servlet中url-pattern的使用2. ASP中格式化時間短日期補0變兩位長日期的方法3. asp知識整理筆記4（問答模式）4. 怎樣才能用js生成xmldom對象，并且在firefox中也實現(xiàn)xml數(shù)據(jù)島？5. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁6. ASP實現(xiàn)加法驗證碼7. XML解析錯誤：未組織好 的解決辦法8. 小技巧處理div內(nèi)容溢出9. js的一些潛在規(guī)則使用分析10. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)
網(wǎng)公網(wǎng)安備