首页 > 代码库 > 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>