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. jsp中sitemesh修改tagRule技術(shù)分享2. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)3. ASP基礎(chǔ)知識VBScript基本元素講解4. React優(yōu)雅的封裝SvgIcon組件示例5. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究6. asp(vbscript)中自定義函數(shù)的默認(rèn)參數(shù)實現(xiàn)代碼7. JavaWeb Servlet中url-pattern的使用8. JSP servlet實現(xiàn)文件上傳下載和刪除9. 輕松學(xué)習(xí)XML教程10. 詳解瀏覽器的緩存機(jī)制
網(wǎng)公網(wǎng)安備