鼠标跟着键盘飞=====兼容代码

最新推荐文章于 2022-08-30 23:56:59 发布

转载最新推荐文章于 2022-08-30 23:56:59 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lujieting/p/10055193.html

本文介绍了一种使用JavaScript和HTML实现鼠标跟随效果的方法。通过监听鼠标移动事件，使页面中的图片实时跟随鼠标的当前位置进行移动，增强了网页的交互性和用户体验。

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

<style>
        img{
            position: absolute;
        }
    </style>
</head>
<body>
<img src="imgs/tianshi.gif" alt="" id="im">
<script src="../DOM/commer.js"></script>
<script>
// document.onmousemove=function (e) { //IE8支持：window.event
//     ver("im").style.left=e.clientX+"px";
//     ver("im").style.top=e.clientY+"px";
// };

//兼容代码
//把代码放在一个对象中
    var evt={
        //window.event和事件参数对象e的兼容
        getEvent:function (evt) {
            return window.event||evt;
        },
        //可视区域横坐标的兼容代码
        getClientX:function (evt) {
            return this.getEvent(evt).clientX;
        },
        //可视区域纵坐标的兼容代码
        getClientY:function (evt) {
            return this.getEvent(evt).clientY;
        },
        //页面向左卷曲出去的横坐标
        getScrollLeft:function () {
            return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
        },
        //页面向上卷曲出去的纵坐标
        getScrollTop:function () {
            return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
        },

        //相对于页面的横坐标（pageX或者是clientX+scrollLeft）
        getPageX:function (evt) {
            return this.getEvent(evt).pageX?this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
        },
        //相对于页面的纵坐标（pageY或者是clientY+scrollTop）
        getPageY:function (evt) {
            return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
        }
    };


    //测试===================================================================
    document.onmousemove=function (e) { //IE8支持：window.event
        ver("im").style.left=evt.getPageX(e)+"px";
        ver("im").style.top=evt.getPageY(e)+"px";
    };
</script>

转载于:https://www.cnblogs.com/lujieting/p/10055193.html