判断碰撞变色新手。。。。

最新推荐文章于 2022-08-16 12:21:59 发布

weixin_30721899

最新推荐文章于 2022-08-16 12:21:59 发布

阅读量86

点赞数

原文链接：http://www.cnblogs.com/zyhh/p/6903567.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width:200px;
            height: 200px;;
        }
        #box_1{
            background: #919191;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -50px;
            margin-top: -50px;
        }
        #box_2{
            background: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box_1"></div>
    <div id="box_2"></div>
</body>
<script>
//绑定事件
    var box2=document.getElementById('box_2');
    var box1=document.getElementById('box_1');
    document.οnmοusemοve=function(e){
        var e= e||event;

        box2.style.left= e.clientX-100+'px';
        box2.style.top= e.clientY-100+'px';
//box2
        var oL=box2.style.left;
        var oT=box2.style.top;
//box1
        var osT=box1.offsetTop;
        var osL=box1.offsetLeft;
//设置碰撞的上下左右
        if(parseInt(oL)>osL-200&&parseInt(oL)<osL+200&&parseInt(oT)>osT-200&&parseInt(oT)<osT+200){
            box1.style.background='red';
//            console.log(1);
        }
    }
</script>
</html>