第四次作业I（移动div） 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:aquamarine;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        let div = document.querySelector("div")
        div.style.position = "absolute"
        w = parseInt(getComputedStyle(div).width)
        h = parseInt(getComputedStyle(div).height)
        div.onmousedown = function () {
            div.onmousemove = function (ev) {
                div.style.left = (ev.pageX - w / 2) + "px"
                div.style.top = (ev.pageY - h / 2) + "px"
            }
        }
        div.onmouseup = function () {
            div.onmousemove = null
        }
    </script>
</body>
</html>

 

posted @ 2024-01-17 16:42  青鸢..i  阅读(13)  评论(0)    收藏  举报