小球随着鼠标移动

最新推荐文章于 2021-06-07 18:45:18 发布

哆来A梦没有口袋

最新推荐文章于 2021-06-07 18:45:18 发布

阅读量409

点赞数

分类专栏： web前端文章标签：小球随着鼠标移动 div随着鼠标移动

本文链接：https://blog.csdn.net/qq_42625428/article/details/102787590

版权

web前端专栏收录该内容

68 篇文章 4 订阅

订阅专栏

简单版本，鼠标移动小球跟着移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: salmon;
            position: absolute;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <script>
        var div = document.querySelector("div");
        document.onmousemove = function (e) {
            var e = e || event;
            var x = e.clientX; //获取鼠标当前坐标
            var y = e.clientY; //获取鼠标当前坐标
            // console.log(x,y);
            div.style.top = y + 'px';  //修改div的top值
            // console.log(div.style.top)
            div.style.left = x + 'px';  //修改div的left值
        }
    </script>
</body>
</html>

鼠标按下，div跟着鼠标移动

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="globe" style="position: absolute;top: 0px;left: 0px;width: 100px;height: 100px;background: red;border-radius: 50%;">
    </div>
    <script type="text/javascript">
        var globe = document.getElementById("globe");
        var flag = false;
        var mouseboforeX = 0;
        var mouseboforeY = 0;
        var globeX = 0;
        var globeY = 0;
      //鼠标移动，计算距离，鼠标移动后的位置 - （鼠标移动之前的位置 - div的位置）
        document.onmousemove = function (e) {
            if (flag) {
                var ev = e || event;
                globe.style.top =  ev.clientY - (mouseboforeY - globeY) + "px";
                globe.style.left = ev.clientX - (mouseboforeX - globeX) + "px";
            }

        }
        
       //鼠标按下时候，当前鼠标位置和当前div的位置
        globe.onmousedown = function () {
            mouseboforeX =  event.clientX;
            mouseboforeY =  event.clientY;
            globeX = parseInt(globe.style.left);
            globeY = parseInt(globe.style.top);
            flag = true
        }

        document.onmouseup = function () {
            flag = false;
        }


    </script>
</body>

</html>

哆来A梦没有口袋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小球随着鼠标移动

简单版本，鼠标移动小球跟着移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: ...
复制链接

扫一扫