前端学习-第二阶段-day12-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34723035/article/details/111879331

今日练习

碰撞检测，当小盒子碰到大盒子时，大盒子会变色
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .move {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: red;
        }

        .box {
            margin: 200px 400px;
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="move"></div>
    <div class="box"></div>
    <script>
        var oDiv = document.getElementsByTagName("div")[0];
        var oDiv1 = document.getElementsByTagName("div")[1];

        oDiv.onmousedown = function (ev) {
            var ev = window.event || ev;
            l = ev.clientX - oDiv.offsetLeft;
            r = ev.clientY - oDiv.offsetTop;
            document.onmousemove = function (ev) {
                var ev = window.event || ev;

                oDiv.style.left = ev.clientX - l + "px";
                oDiv.style.top = ev.clientY - r + "px";

                //移动盒子高度： var moveH
                //移动盒子宽度：var moveW
                //移动盒子距离页面的高度：var moveT

                //固定盒子高度：var fixH
                //固定盒子宽度：var fixW
                //固定盒子距离页面的高度：var fixT

                var moveH = oDiv.offsetHeight;
                var moveW = oDiv.offsetWidth;
                var moveT = oDiv.offsetTop;
                var moveL = oDiv.offsetLeft;

                var fixH = oDiv1.offsetHeight;
                var fixW = oDiv1.offsetWidth;
                var fixT = oDiv1.offsetTop;
                var fixL = oDiv1.offsetLeft;

               

                if ((moveT+moveH>=fixT&&moveT<=fixT+fixH)&&(moveL+moveW>=fixL&&moveL<=fixL+fixW)) {
                    oDiv1.style.backgroundColor = "pink";
                }else{
                    oDiv1.style.backgroundColor = "blueviolet";
                }

            }
            document.onmouseup = function () {
                document.onmousemove = null;
                if (oDiv.releaseCapture) {
                    oDiv.releaseCapture();
                }
            }
            if (oDiv.setCapture) {
                oDiv.setCapture();
            }

            return false;
        }


    </script>
</body>

</html>