碰撞检测

图片与div碰上了图片变为彩色，没碰上图片是黑白

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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;}
</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 ) {  //IE阻止事件的默认行为（设置全局捕获）
                obj.setCapture();
            }
            
            document.onmousemove = function(ev) {
                var ev = ev || event;
                ////////////////////////碰撞检测///////////////////////
                var L = ev.clientX - disX;  //物体左侧与屏幕的距离=鼠标的x位置-物体宽度的一半
                var T = ev.clientY - disY;  //物体顶部与屏幕的距离
                
                var L1 = L;  //div左侧与屏幕左侧的距离
                var R1 = L + obj.offsetWidth;  //div右侧到屏幕左侧的距离
                var T1 = T; //div顶部与屏幕的距离
                var B1 = T + obj.offsetHeight;  //div底部与屏幕顶部的距离
                
                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 ) {  //如果div在图片的九宫格外，说明没碰上
                    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 ) { //清除IE的全局捕获
                    obj.releaseCapture();
                }
            }
            
            return false;  //清除拖拽的默认事件
            
        }
        
    }
    
}
</script>
</head>

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

 

posted @ 2017-04-12 16:40  念念念不忘  阅读(125)  评论(0)    收藏  举报