js之div跟随鼠标移动

最新推荐文章于 2024-11-09 08:46:56 发布

原创最新推荐文章于 2024-11-09 08:46:56 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #html

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了使用JavaScript实现div元素跟随鼠标移动的功能，涉及到onmouseover事件、clientX/Y、pageX/Y、scrollTop等属性。在不同浏览器和页面滚动情况下，通过逐步改进实现兼容性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、主要用到的相关属性：
1）onmouseover
2）clientX、clientY
3）pageX、pageY
4）document.body.scrollTop
5）document.documentElement.scrollTop;

二、实现

第一版本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width:100px;
            height:100px;
            background-color:red;
            /***
               开启定位，定位很重要，可以尝试注释掉，试试效果
             */
            position:absolute;
        }
    </style>
    <script type="text/javascript">
    //使div可以随鼠标移动
    //获取box1
    let box1 = document.getElementById("box1")
    //绑定鼠标移动事件，可以发现，这个地方并不是给box1绑定鼠标移动事件，但我们给box1绑定时，会发现div只能随着鼠标往下移动，而不能往上，这是因为div的大小只有100px*100px，鼠标移动控制div的范围就只在100px*100px内，所以这里我们要给document进行鼠标移动事件绑定
    document.onmousemove = function(event){
    //这条语句是为了兼容IE8以下版本
    	event = event || window.event;
    //clientX和clientY:用于获取鼠标在当前的可见窗口
    //的坐标，而div的偏移量，是相对于整个页面的
    let left = event.clientX;
    let top = event.clientY;
    //设置div的偏移量（别忘记加上“px”）
    box1.style.left=left+"px";
    box1.style.top = top+"px";
    
	}
    </script>
</head>
<body>
<div id="box1"></div>
<html>

第一个版本就完成了，看上去比较完美，但是当我们给body，增加内联样式“width:1000px,height:1000px”时，页面出现滚动条，当我们滑动滚动条时，会发现鼠标指针与div之间会相隔一段距离，而这段距离刚好是我们滑动的滚动条的距离。

第二个版本：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width:100px;
            height:100px;
            background-color:red;
            /***
               开启定位，定位很重要，可以尝试注释掉，试试效果
             */
            position:absolute;
        }
    </style>
    <script type="text/javascript">
    //使div可以随鼠标移动
    //获取box1
    let box1 = document.getElementById("box1")
    //绑定鼠标移动事件，可以发现，这个地方并不是给box1绑定鼠标移动事件，但我们给box1绑定时，会发现div只能随着鼠标往下移动，而不能往上，这是因为div的大小只有100px*100px，鼠标移动控制div的范围就只在100px*100px内，所以这里我们要给document进行鼠标移动事件绑定
    document.onmousemove = function(event){
    //这条语句是为了兼容IE8以下版本
    	event = event || window.event;
    //pageX和pageY可以获取鼠标相对于当前页面的坐标。（简单来说，就是可以获取到包括滚动条在内的页面的坐标）
    //但是不支持ie8
   
    let left = event.pageX;
    let top = event.pageY;
    //设置div的偏移量（别忘记加上“px”）
    box1.style.left=left+"px";
    box1.style.top = top+"px";
    
	}
    </script>
</head>
<body>
<div id="box1" style="width:1000px;height:1400px"></div>
<html>

看上去功能已经完成了，but，ie8不支持，继续进行改进！

第三个版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width:100px;
            height:100px;
            background-color:red;

            /***
               开启定位
             */
            position:absolute;
        }
    </style>
    <script>
        window.onload = function(){
            /**
             * 使div可以随鼠标移动。
             */
            //获取box1
            let box1 = document.getElementById("box1");
            //绑定鼠标移动事件
            document.onmousemove = function(event){
                //获取到鼠标的坐标
                //解决ie兼容性问题
                event = event|| window.event;

                //获取到鼠标的坐标

                /***
                 * clientX和clientY
                 * 用于获取鼠标在当前的可见窗口的坐标
                 * div的偏移量，是相对于整个页面的
                 * @type {number}
                 */

                /**
                 *  pageX和pageY可以获取鼠标相对于当前页面的坐标
                 *  但是不支持ie8.
                 * @type {number}
                 */
                // let left = event.pageX;
                // let top = event.pageY;
 
                let left = event.clientX;
                let top = event.clientY;

                /**
                 * 获取滚动条的距离
                 *chrome认为滚动条是body的，可以通过body.scrollTop来获取
                 * 火狐等浏览器认为浏览器的滚动条是html的
                 *
                 * @type {string}
                 */

                // let st = document.body.scrollTop;
                    //现在最新的谷歌浏览器也支持该相关属性（观看2016年相关视频时，老师使用的google版本只支持使用document.body.scrollTop）
                let st = document.body.scrollTop||document.documentElement.scrollTop;
                 let sl = document.body.scrollLeft||document.documentElement.scrollLeft;
       
                //设置div偏移量
                box1.style.left=left+sl+"px";
                box1.style.top = top+st+"px";

            }
        }
    </script>
</head>
<body style="height:1000px;width:1400px">
<div id="box1"></div>
</body>
</html>