您好,登錄后才能下訂單哦!
JavaScript中怎么實現碰撞檢測功能,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
JS實現碰撞檢測的方法分析:
當div1在div2的上邊線(t2)以上的區域活動時,始終碰不上
當div1在div2的右邊線(r2)以右的區域活動時,始終碰不上
當div1在div2的下邊線(b2)以下的區域活動時,始終碰不上
當div1在div2的左邊線(r2)以左的區域活動時,始終碰不上
JS實現碰撞檢測的方法完整測試代碼
HTML部分:
<style>
#div1{
width:100px;height:100px;background:green;
position:absolute;
}
#div2{
width:100px;height:100px;background:yellow;
position:absolute;left:300px;top:200px;z-index:-1;
}
</style>
JS部分:
<script>
window.onload=function(){
varoDiv=document.getElementById('div1');
varoDiv2=document.getElementById('div2');
vardisX=0;
vardisY=0;
oDiv.onmousedown=function(ev){
varev=ev||window.event;
disX=ev.clientX-oDiv.offsetLeft;
disY=ev.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
varev=ev||window.event;
vart1=oDiv.offsetTop;
varl1=oDiv.offsetLeft;
varr1=oDiv.offsetLeft+oDiv.offsetWidth;
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。