案例：图片跟着鼠标飞的最终版本

换了个好看的糖果照片，想给博客首页加上，但是加上后，应该是overwrite原来的html，所以光有鼠标跟着飞的效果，原来的功能都不能用了

放入common.js

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

  <style>

    img {

      position: absolute;

    }

  </style>

</head>

<body>

  <img

    src="https://images.cnblogs.com/cnblogs_com/jane-panyiyun/1620008/t_191224122527%E5%9C%A3%E8%AF%9E%E7%B3%96%E6%9E%9C.png?a=1577190334776"

    alt="" id="im" />

  <script src="common.js"></script>

  <script>

    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) {

      my$("im").style.left = evt.getPageX(e) + "px";

      my$("im").style.top = evt.getPageY(e) + "px";

    };

  </script>

</body>

</html>

JS---案例：图片跟着鼠标飞的最终版本的更多相关文章

  1. JS---案例：图标跟着鼠标飞(有bug)

    案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. jQuery 图片跟着鼠标动

    html默认鼠标样式改成图片时格式为 .ani 图片跟随鼠标挪动 html <div id="mouseImg"> <img src="images/问 ...

  3. jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

    一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...

  4. 图片跟着鼠标动js

    <!DOCTYPE html><html><head> <title>duisgf</title> <meta charset=&qu ...

  5. JS实现图片跟随鼠标移动

    在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...

  6. JQ图片跟着鼠标走

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 用JS控制图片随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. js 小野人跟着鼠标移动

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. Javascript实现让小图片一直跟着鼠标移动

    Javascript实现让小图片一直跟着鼠标移动实例 注意:图片可能加载不出来,注意更换 <!doctype html> <html> <head> <met ...

随机推荐

  1. <每日一题>题目21：简单的python练习题(21-30)

    #21.cookie和session的区别 ''' 1.cookie数据存放在客户的浏览器上,session数据存放在服务器上 2.cookie不是很安全,可以通过分析本地cookie组成伪造cook ...

  2. C#跨域

    //在ConfigureServices中配置 #region 跨域 var urls = "*";//Configuration["AppConfig:Cores&qu ...

  3. MathType插件安装

    1 安装包下载 版本号:7.4 下载 提取码:fxma 2 安装方法 用安装包内的Key激活即可.软件激活后不能升级. 注意:必须断网或者加入防火墙阻止联网使用! 3 可能遇到的问题 当安装完Math ...

  4. ES6之主要知识点（九）Set和Map

    1.Set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); ...

  5. thymeleaf报错元素类型必须由匹配的结束标记终止

    spring boot 1.x 版本中thymeleaf报错元素类型 “link” 必须由匹配的结束标记 “</link>” 终止解决办法: 1.在pom.xml文件中添加: <de ...

  6. utils05_git在idea下的操作

    1.idea下将工程添加到本地仓库 1>找到自己的git.exe 2>创建本地的git仓库,将项目放入本地仓库 3> *从本地仓库更新 *提交到本地仓库 *比较版本差异 *丢弃我的修 ...

  7. js的深复制与浅复制

    什么是深复制和浅复制? 深复制和浅复制的概念只存在于对象array和数组obj上. 浅复制是:模糊复制,就是不管对方是字符串类型还是引用类型都通通复制过来.结果两个变量的内容会同时变化. 深复制是:有 ...

  8. sde中的shp数据无法编辑

    最近整理空间数据库时,用sde比较多,发现在编辑sde中的数据时总是出现数据被锁或者是被其他应用程序占用.用了很多方法处理,但不是每个方法都实用.下面讲的是我在删除shp或者给shp增加字段时所遇到的 ...

  9. docker 整理

    管理 docker批量删除容器.镜像   1.删除所有容器 docker rm `docker ps -a -q` 1.1 按条件删除容器 删除包含某个字段 ,镜像名或容器名均可, 例如删除 zhy* ...

  10. CentOS安装Eclipse luna

    1  解压 Eclipse luna到/opt tar -zxvf eclipse-java-luna-SR1-linux-gtk-x86_64.tar.gz -C /opt 2  创建软链接 ln ...