碰撞检测 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                z-index: 2;
            }
            #img1{
                position: absolute;
                left: 500px;
                top: 200px;
                width: 200px;
                height: 200px;
            }
        </style>
<script>
window.onload=function(){
    
    var oDiv=document.getElementById("div1");
    var oImg=document.getElementById("img1");
    
    drag(oDiv);
    function drag(obj){
            obj.onmousedown = function(ev){
            var ev = ev || event;
            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;
            if(obj.setCapture){
                obj.setCapture();
            }
            document.onmousemove = function(ev){
                var ev = ev || event;
                var L = ev.clientX-disX;
                var T = ev.clientY-disY;
                
                var L1=L;
                var R1=L+obj.offsetWidth;
                var T1=T;
                var B1=T+obj.offsetHeight;
                
                var L2=oImg.offsetLeft;
                var R2=L2+oImg.offsetWidth;
                var T2=oImg.offsetTop;
                var B2=T2+oImg.offsetHeight;
                
                if(R1<L2 || L1>R2 || B1<T2 || T1>B2){
                    oImg.src="img/1.jpg";
                }else{
                    oImg.src="img/2.jpg";
                }
                
                
                obj.style.left = L + "px";
                obj.style.top = T + "px";
            }
            document.onmouseup = function(){
                document.onmousemove=document.onmouseup=null;
                if(obj.releaseCapture){
                    obj.releaseCapture();
                }
            }
            return false;
        }
    }
}
</script>
    </head>
    <body>
        <div id="div1"></div>
        <img src="img/1.jpg" id="img1" />
    </body>
</html>

 

posted @ 2018-11-29 14:26  webxy  阅读(131)  评论(0)    收藏  举报