JS实现div随鼠标移动练习

最新推荐文章于 2023-01-02 01:48:07 发布

静颍流年

最新推荐文章于 2023-01-02 01:48:07 发布

阅读量632

点赞数

文章标签： JS实现div随鼠标移动练习

本文链接：https://blog.csdn.net/weixin_43571052/article/details/88368137

版权

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>div随鼠标移动练习</title>
    <style type="text/css">
    #box1{
        width: 100px;
        height: 100px;
        background-color: #bbffaa;
        position: absolute;
    }
    </style>
    <script type="text/javascript">
    window.onload = function(){
        var box1 = document.getElementById("box1");
        //绑定鼠标移动事件
        document.onmousemove = function(event){
            //处理兼容问题
            event = event || window.event;
            var st = document.body.scrollTop || document.documentElement.scrollTop;
            var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
            //获取鼠标的坐标
            var left = event.clientX;
            var top = event.clientY;
            //设置div的偏移量
            box1.style.left = left + sl + "px";
            box1.style.top = top + st+ "px";
        }
    }
    </script>
</head>
<body style="height: 1000px; width:1000px">
    <div id="box1"></div>
</body>
</html>

用到的知识点

clientX和clientY 用于获取鼠标在当前的可见窗口的坐标

pageX和pageY可以获取鼠标相对于当前页面的坐标，但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用

chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取，火狐等浏览器认为浏览器的滚动条是html的

静颍流年

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS实现div随鼠标移动练习

代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;div随鼠标移动练习&lt;/title&gt; &lt;style type="text/css"&gt; #box1{
复制链接

扫一扫