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

换了个好看的糖果照片，想给博客首页加上，但是加上后，应该是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. Python网络爬虫之三种数据解析方式 (xpath, 正则, bs4)

    引入 回顾requests实现数据爬取的流程 指定url 基于requests模块发起请求 获取响应对象中的数据 进行持久化存储 其实,在上述流程中还需要较为重要的一步,就是在持久化存储之前需要进行指 ...

  2. Jmeter安装与配置（第一篇）

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文 ...

  3. Activiti 接收任务活动

    流程中往往需要特定人接受任务并进行一定操作才能继续进行下去. 代码如下 import java.io.InputStream; import org.activiti.engine.ProcessEn ...

  4. mysql出错的代码解析及解答

    1005:创建表失败 1006:创建数据库失败 1007:数据库已存在,创建数据库失败 1008:数据库不存在,删除数据库失败 1009:不能删除数据库文件导致删除数据库失败 1010:不能删除数据目 ...

  5. BZOJ 3236 AHOI 2013 作业 莫队+树状数组

    BZOJ 3236 AHOI 2013 作业 内存限制:512 MiB 时间限制:10000 ms 标准输入输出     题目类型:传统 评测方式:文本比较 题目大意: 此时己是凌晨两点,刚刚做了Co ...

  6. Delphi 设计模式：《HeadFirst设计模式》Delphi7代码---观察者模式之WeatherReport[转]

      1   2{<HeadFirst设计模式>之观察者模式 }   3{ 主题与观察者                    }   4{ 编译工具 :Delphi7.0          ...

  7. HBase入门实例: Table中Family和Qualifier的关系与区别

    Table中Family和Qualifier的关系与区别 就像用MySQL一样,我们要做的是表设计,MySQL中的表,行,列的在HBase已经有所区别了,在HBase中主要是Table和Family和 ...

  8. Leetcode129. Sum Root to Leaf Numbers求根到叶子节点数字之和

    给定一个二叉树,它的每个结点都存放一个 0-9 的数字,每条从根到叶子节点的路径都代表一个数字. 例如,从根到叶子节点路径 1->2->3 代表数字 123. 计算从根到叶子节点生成的所有 ...

  9. JPA实体

    Java类可以很容易地转换成实体. 对于实体转换,基本要求是 - 无参数构造函数 注解 @Entity和@Id注解. @Entity - 这是一个标记注释,表明这个类是一个实体.这个注释必须放在类名称 ...

  10. 面试Mysql的几个常见问题

    1.insert时如果数据重复如何用update? ,,) ; 2.一张表,里面有 ID 自增主键,当 insert 了 17 条记录之后,删除了第 15,16,17 条记录,再把 Mysql 重启, ...