js案例图片跟着鼠标移动

最新推荐文章于 2023-09-08 18:50:39 发布

范2小青年

最新推荐文章于 2023-09-08 18:50:39 发布

阅读量352

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u014805482/article/details/83417174

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="../css/reset.css"/>
    <style>
        body{
            height: 3000px;
            width: 2000px;
        }
        img{
            position: absolute;
        }
    </style>
</head>
<body>
<img src="../images1/huaji.png" id="im"/>
<script>
    var evt = {
        //兼容性代码，谷歌火狐支持事件处理事件event
        //ie支持window.event
        getEvent:function (event) {
            return window.event || event;
        },
        //获取可视区域的横坐标值
        getClientX:function (event) {
            return this.getEvent(event).clientX;
        },
        //获取可视区域的纵坐标值
        getClientY:function (event) {
            return this.getEvent(event).clientY;
        },
        //页面向左卷曲出去的距离
        getScrollLeft:function () {
            return document.body.scrollLeft||window.pageXOffset||document.documentElement.scrollLeft||0;
        },
        //页面向上卷曲出去的距离
        getScrollTop:function () {
            return document.body.scrollTop||window.pageYOffset||document.documentElement.scrollTop||0;
        },
        //相对于页面的横坐标(pageX(window.event是不支持这个属性的)或者是clientX+scrollLeft)
        getPageX:function (event) {
          return this.getEvent(event).pageX?this.getEvent(event).pageX:this.getClientX(event)+this.getScrollLeft();
        },
        //相对于页面的纵坐标(pageY(window.event是不支持这个属性的)或者是clientY+scrollTop)
        getPageY:function (event) {
            return this.getEvent(event).pageY?this.getEvent(event).pageY:this.getClientY(event)+this.getScrollTop();
        }
    };
    document.onmousemove=function (e) {
      document.getElementById("im").style.left = evt.getPageX(e)+"px";
      document.getElementById("im").style.top = evt.getPageY(e)+"px";
    };
</script>
</body>
</html>

实现效果