Javascript：實操---矩形碰撞後顯示顏色

標籤：style   color   java   os   io   strong   ar   cti   

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>