Posted in Javascript onMarch 12, 2020
本文实例为大家分享了JS实现碰撞检测效果的具体代码,供大家参考,具体内容如下
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
JS实现碰撞检测效果
- Author -
李尚书声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@