HTML作业（二）

RMB的那个钱

已于 2025-04-23 09:20:46 修改

阅读量210

点赞数 8

分类专栏： VSCode网页作业文章标签： html 前端

于 2025-04-23 09:12:55 首次发布

本文链接：https://blog.csdn.net/2402_88176575/article/details/147440161

版权

VSCode网页作业专栏收录该内容

3 篇文章

订阅专栏

demo01.html

<!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>
        #box{
            width: 400px;
            height: 300px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="./image/微信图片_2025-04-09_193138_451.jpg" alt="">
    </div>
    <script>
        let box = document.querySelector("#box")
        box.onmousedown = function(e){
            let ox = e.offsetX
            let oy = e.offsetY
            document.onmousemove = function(e2){
                let cx = e2.clientX
                let cy = e2.clientY
                let dx = cx - ox
                let dy = cy - oy
                box.style.left = dx + "px"
                box.style.top = dy + "px"
                }
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    </script>
</body>
</html>

image（自选图片）

网页拖拽效果展示