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

换了个好看的糖果照片，想给博客首页加上，但是加上后，应该是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. Struts2入门问题

    一 使用Struts 2 开发程序的基本步骤 加载Struts2 类库 配置web.xml文件 开发视图层页面 开发控制层Action 配置struts.xml文件 部署.运行项目 第一步先导架包:在 ...

  2. reac-native + typescript 的环境搭建

    一. RN-TS环境搭建 . 安装RN脚手架 yarn add create-react-native-app -g yarn global add typescript . 创建项目文件夹 crea ...

  3. js时间比较大小，时间加减

    第一种: //时间类比较 startTime= new Date(Date.parse(starttime)); endTime=new Date(Date.parse(endTime)); //进行 ...

  4. UDP和TCP的区别？

    区别总结: 1.TCP面向连接,UDP的面向无连接的,即发送数据之前不需要建立简介. 2.TCP提供可靠的数据传输,有发送应答机制,超时重传机制,错误校验机制,流量控制机制保证传输的安全,不丢失,不重 ...

  5. [转]Visual Studio 2010单元测试（3）－－顺序单元测试

    之前我们做的测试都是一个一个进行的,当然我们也可以一次性选择多个测试方法进行,但是测试运行的顺序以“测试列表编辑器”窗口中的默认列表顺序为准.在实际场景中,我们需要进行有顺序的单元测试,步骤可能每一步 ...

  6. mysql工具使用

    mysql -u user_name -p123456 -h host_name -P 3306 -D database_name -e "show full processlist;&qu ...

  7. 全栈之路-微信小程序-架构总览

    第一阶段是用来学习小程序开发的,这个就相当于PC端的网站吧,只不过现在依靠微信强大的流量来将业务搬移到小程序中,对于企业来说,这是一种很好的发展方向,既减少了开发成本,又减少了推广成本,小程序是很被人 ...

  8. 【NOIP2018模拟11.01】树

    题目 描述 题目大意 维护一个序列,支持三种操作: 1.修改一段区间,将这段区间内的所有数都andandand一个数. 2.询问区间和. 3.询问区间两两相加的平方和. N≤10000N\leq 10 ...

  9. JZOJ5918【NOIP2018模拟10.20】Car

    题目 最近比较懒,题目描述都直接截图了. 题目大意 给你一棵树,还有树上的几条路径,一条路径上的点到路径上其它任意点的代价为111.然后是一堆询问,问从一个点到另一个点的最小代价. 思路 一开始做这题 ...

  10. Ionic 包名修改 步骤

    1.config.xml => <widget id=...... 2.plugin 中 android.json 里面package 3.platforms\android 里面 and ...