案例：使用九宫格检测碰撞 





 




<body> 　　
　　<div id="div1"></div> 　　
　　<img src="1.jpg" id="img1" /> 
</body>


<style>
　　#div1 {width: 100px; height: 100px; background: red; position: absolute; z-index: 2;}
　　#img1 { position: absolute; left: 500px; top: 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 = '1.jpg';
                } else {
                    oImg.src = '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>




 








            

            
posted @ 
2017-04-07 22:39 
Booo 
阅读(248) 
评论(0) 
 
收藏 
举报