JS實(shí)現(xiàn)碰撞檢測(cè)效果
本文實(shí)例為大家分享了JS實(shí)現(xiàn)碰撞檢測(cè)效果的具體代碼，供大家參考，具體內(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. XML入門(mén)精解之結(jié)構(gòu)與語(yǔ)法2. 秒殺場(chǎng)景的緩存、隊(duì)列、鎖使用Redis優(yōu)化設(shè)計(jì)方案3. React優(yōu)雅的封裝SvgIcon組件示例4. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera5. ASP中格式化時(shí)間短日期補(bǔ)0變兩位長(zhǎng)日期的方法6. jsp文件下載功能實(shí)現(xiàn)代碼7. ASP基礎(chǔ)知識(shí)Command對(duì)象講解8. ASP腳本組件實(shí)現(xiàn)服務(wù)器重啟9. jsp+mysql實(shí)現(xiàn)網(wǎng)頁(yè)的分頁(yè)查詢10. jsp+servlet實(shí)現(xiàn)猜數(shù)字游戲
網(wǎng)公網(wǎng)安備