跟随鼠标事件

最新推荐文章于 2022-02-15 22:19:48 发布

上冬二十二

最新推荐文章于 2022-02-15 22:19:48 发布

阅读量82

点赞数

本文链接：https://blog.csdn.net/qq_44941776/article/details/114460079

版权

练手专栏收录该内容

5 篇文章 0 订阅

订阅专栏

跟随鼠标的练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标跟随</title>
    <style>
        #img{
            width: 10px;
            height: 10px;
            position: absolute;
        }
    </style>
</head>
<body style="width: 2000px; height:1000px;">
        <div id="img">
            <img src="../图片/geyou.jpg" alt="">
        </div>
        <script>
            window.onclick = function(){
                var img = document.getElementById("img");
                
                document.onmousemove = function(event){
                    //获取滚动条滚动的距离
                    /*
                        chrome认为浏览器的滚动条是body的可以通过body.scrollTop来获取
                            document.body.scrollLeft;
                        火狐等浏览器认为滚动条是html的
                            documentElement.scrollLeft;
                        为了使全部浏览器兼容
                    */
                    var st = document.body.scrollTop||document.documentElement.scrollTop;
                    var sl = document.body.scrollLeft||document.documentElement.scrollLeft;


                    //定义形参来定位鼠标的坐标位置
                    //解决兼容性问题
                    event = event || window.event;
                    //获取到鼠标的坐标
                    var x = event.clientX;
                    var y = event.clientY;
                    img.style.left = x+sl+"px";
                    img.style.top = y+st+"px";
                    /*
                    clientX和clientY
		                用于获取鼠标在当前的可见窗口的坐标
	                div的偏移量，是相对于整个页面的
                    pageX和pageY
                        用于获取鼠标相对于当前页面的坐标
                        但是在IE8上不兼容
                    */



                }
            }
        </script>
</body>
</html>