div跟随鼠标移动

最新推荐文章于 2024-04-16 19:44:59 发布

zmj2051176726

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量417

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/102955722

版权

javaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一.先了解元素与鼠标的坐标原点都是谁
在这里插入图片描述
二.代码实现
获取到鼠标的坐标：

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

div的偏移量，是相对于整个页面的
所以若想要div跟着鼠标走则：
div的坐标=鼠标的坐标+滚动条偏移量

<style>
    #one{
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;  /*一定要定位，否则虽然坐标变了但不会移动*/
    }

</style>
<script type="text/javascript">
    window.onload=function () {
        var one=document.getElementById("one");
     //是在整个文档内移动，所以给document绑定鼠标移动事件
        document.onmousemove=function (e) {
            var event=e||window.event;
            //获取滚动条滚动的距离
					/*
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
					 * 火狐等浏览器认为浏览器的滚动条是html的，
					 */
			//浏览器兼容		 
            var st = document.body.scrollTop || document.documentElement.scrollTop;
            var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
            one.style.top=event.clientY+st+"px";
            one.style.left=event.clientX+sl+"px";

        }

    }
</script>
<body style="height: 1500px;width: 1000px;">
   <div id="one"></div>
</body>