图片跟随鼠标飞

最新推荐文章于 2024-10-30 22:25:38 发布

羊咩咩和喵呜

最新推荐文章于 2024-10-30 22:25:38 发布

阅读量292

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：图片跟随鼠标飞 pageX clientX

本文链接：https://blog.youkuaiyun.com/qq_42853707/article/details/88701158

js 专栏收录该内容

6 篇文章

订阅专栏

博客提到图片跟随鼠标飞的功能因兼容性问题，暂时不支持Ie8，博主希望有大佬帮忙修改代码以解决此问题。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片跟着鼠标飞</title>
    <style>
        img {
            position: absolute;
        }
        body{
            height: 2000px;
        }
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

<img src="images/006.jpg" alt=""id="im"/>
<script src="common.js"></script>
<script>
    //页面的鼠标移动事件
    document.onmousemove=function (e) {
        //鼠标相对于页面的可视区域的横坐标
        //my$("im").sytle.left= e.clientX+"px";
        //鼠标相对于页面的可视区域的纵坐标
        //my$("im").style.top= e.clientY+"px";
        //因为IE8 比较low，没有针对事件参数对象，使用的是
        //window.event,那么，事件处理函数中是没有e这个参数的
        //所以，使用window.event来代替e
        my$("im").style.left=window.event.clientX+"px";
        my$("im").style.top=window.event.clientY+"px";
//   火狐支持的事件参数对象e；，不支持window.event

        //1.======此时window。event和事件参数对象e是需要兼容的
        //2.pageX和pageY就是鼠标相对于页面 的边界坐标

        //谷歌火狐可以
//    my$("im").style.left= e.pageX+"px";
//        my$("im").style.top= e.pageY+"px";



        //ie8不支持，不支吃pageX属性
//        my$("im").style.left=window.event.pageX+"px";
//        my$("im").style.top=window.event.pageY+"px";
//
            function getScroll() {
                return {
                    left:window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0,
                    top:window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0
                }
            }
        my$("im").style.left=window.event.clientX+"px"+getScroll().left;
        my$("im").style.top=window.event.clientY+"px"+getScroll().top;
    };
</script>
</body>
</html>

由于兼容性，暂时不支持Ie8
求大佬给改改