本文實例為大家分享了javascript實現(xiàn)碰撞檢測的具體代碼,供大家參考,具體內(nèi)容如下
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司一直秉承“誠信做人,踏實做事”的原則,不欺瞞客戶,是我們最起碼的底線! 以服務(wù)為基礎(chǔ),以質(zhì)量求生存,以技術(shù)求發(fā)展,成交一個客戶多一個朋友!專注中小微企業(yè)官網(wǎng)定制,成都網(wǎng)站建設(shè)、成都網(wǎng)站制作,塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。
<html> <head> <style> #div1 {width:100px; height:100px; background:red; position:absolute; z-index:2;} #div2 {width:100px; height:100px; background:yellow; position:absolute; left:230px; top:220px; z-index:1;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <script> window.οnlοad=function () { var oDiv=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); oDiv.οnmοusedοwn=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.offsetLeft; var disY=oEvent.clientY-oDiv.offsetTop; document.οnmοusemοve=function (ev) { var oEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; var l1=oDiv.offsetLeft;//紅塊左邊線 var r1=oDiv.offsetLeft+oDiv.offsetWidth;//紅塊右邊線 var t1=oDiv.offsetTop;//紅塊上邊線 var b1=oDiv.offsetTop+oDiv.offsetHeight;//紅塊下邊線 var l2=oDiv2.offsetLeft;//黃塊左邊線 var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;//黃塊右邊線 var t2=oDiv2.offsetTop;//黃塊上邊線 var b2=oDiv2.offsetTop+oDiv2.offsetHeight;//黃塊下邊線 if(r1<l2 || l1>r2 || b1<t2 || t1>b2) { oDiv2.style.background='yellow'; } else { oDiv2.style.background='green'; } }; document.οnmοuseup=function () { document.οnmοusemοve=null; document.οnmοuseup=null; }; }; }; </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
碰撞檢測原理圖如上:
我們檢測碰撞時,發(fā)現(xiàn)兩個div碰上檢測比沒碰上的檢測要難,所以以沒碰上作為檢測條件。畫上九宮格,當(dāng)紅色div在黃色div左邊線或是右邊線或是上邊線或是下邊線外時是永遠(yuǎn)不可能碰上的,只要這四個條件都不滿足,意味著兩個div相撞了,將黃塊變綠。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站題目:基于javascript實現(xiàn)碰撞檢測
文章來源:http://muchs.cn/article26/pgopjg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、移動網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、電子商務(wù)、、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)