记录：图片跟着鼠标飞（浏览器兼容）

最新推荐文章于 2021-09-27 17:57:16 发布

chengsi7955

最新推荐文章于 2021-09-27 17:57:16 发布

阅读量220

点赞数

原文链接：https://my.oschina.net/u/3848851/blog/1814666

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王侯将相宁有种乎</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 2000px;
        }
        img{
            position: absolute;
        }
    </style>
</head>
<body>
<img src="images/bird.png" alt="" id="im" />
<script src="common.js"></script>
<script>
//下面的代码在谷歌和火狐支持 初次版本
// my$("im").style.left=e.pageX+"px"; 
// my$("im").style.top=e.pageY+"px"; 
//下面的代码在IE8中不支持,不支持pageX和pageY的属性 
// my$("im").style.left=window.event.pageX+"px"; 
// my$("im").style.top=window.event.pageY+"px";

  //图片跟着鼠标飞,可以在任何的浏览器中实现
  //window.event和事件参数对象e的兼容
  //clientX和clientY单独的使用的兼容代码
  //scrollLeft和scrollTop的兼容代码
  //pageX,pageY和clientX+scrollLeft 和clientY+scrollTop

  //把代码封装在一个函数

  //把代码放在一个对象中
  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.οnmοusemοve=function (e) {
    my$("im").style.left=evt.getPageX(e)+"px";
    my$("im").style.top=evt.getPageY(e)+"px";
  };

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

转载于:https://my.oschina.net/u/3848851/blog/1814666

chengsi7955

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录：图片跟着鼠标飞（浏览器兼容）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>王侯将相宁有种乎</title> <style&gt...
复制链接

扫一扫