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

最新推荐文章于 2025-07-26 03:33:31 发布

转载最新推荐文章于 2025-07-26 03:33:31 发布 · 113 阅读

1 ·

CC 4.0 BY-SA版权

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

本文通过两个div元素演示了如何使用CSS进行精确的页面布局，并利用JavaScript实现元素跟随鼠标移动及碰撞检测效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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.onmousemove=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>