首页 > 代码库 > Javascript:实操---矩形碰撞后显示颜色
Javascript:实操---矩形碰撞后显示颜色
CSS部分
<style type="text/css">
div{
font-size: 70px;
}
#div1{
height: 100px;
width: 100px;
background-color: #ccc;
position: absolute;
}
#div2{
height: 100px;
width: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 300px;
}
</style>
HTML部分
<div id="div1">A</div>
<div id="div2">B</div>
JS部分
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
oDiv1.onmousedown=function(ev){
var oEvent=ev||window.event;
var disX=oEvent.clientX-oDiv1.offsetLeft;
var disY=oEvent.clientY-oDiv1.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||window.event;
oDiv1.style.left=oEvent.clientX-disX+"px";
oDiv1.style.top=oEvent.clientY-disY+"px";
var l1=oDiv1.offsetLeft;
var r1=l1+oDiv1.offsetWidht;
var t1=oDiv1.offsetTop;
var b1=t1+oDiv1.offsetHeight;
var l2=oDiv2.offsetLeft;
var r2=l2+oDiv2.offsetWidth;
var t2=oDiv2.offsetTop;
var b2=t2+oDiv2.offsetHeight;
if(b1<t2||b2<t1||r2<l1||r1<l2){
oDiv2.style.backgroundColor="yellow";
}else{
oDiv2.style.backgroundColor="blue";
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
}
</script>