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

换了个好看的糖果照片，想给博客首页加上，但是加上后，应该是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. Java之io nio aio 的区别

    这个问题最近面试总是遇到,作为一个只会写流水代码的程序员,一脸懵逼.看了网上的解释,看的还是很模糊,说下我对这个的理解. 先引出一个话题,两个大水缸,一个空一个满,让你把一个缸里面的水弄到另一个里面. ...

  2. 批量插入或更新操作之ON DUPLICATE KEY UPDATE用法

    实际的开发过程中,可能会遇到这样的需求,先判断某一记录是否存在,如果不存在,添加记录,如果存在,则修改数据.在INSERT语句末尾指定ON DUPLICATE KEY UPDATE可以解决这类问题. ...

  3. 03_springmvc整合mybatis

    一.整合思路 springmvc+mybaits的系统架构: 第一步整合dao层:mybatis和spring整合:通过spring管理mapper接口,使用mapper的扫描器自动扫描mapper接 ...

  4. DEV 皮肤的使用

    一.皮肤的使用 拖入defaultLookAndFeel 组件到窗体中 拖入ribbonControl 控件到窗体中 将窗体继承为 DevExpress.XtraBars.Ribbon.RibbonF ...

  5. elasticsearch 中文API 删除（四）

    删除API 删除api允许你通过id,从特定的索引中删除类型化的JSON文档.如下例: DeleteResponse response = client.prepareDelete("twi ...

  6. 如何转移Pycharm的设置或者缓存到其他盘

    因为Pycharm项目缓存C:\Users\wq\.PyCharm2017.2\system\caches下面的content.dat.storageData特别大,占用很多C盘空间,所以我就想办法, ...

  7. Leetcode946. Validate Stack Sequences验证栈序列

    给定 pushed 和 popped 两个序列,只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时,返回 true:否则,返回 false . 示例 1: 输入:pus ...

  8. 使用 top instance 命令查看运行中 MaxCompute 作业

    我们都知道,在 MaxCompute Console 里,可以使用下面的命令来列出运行完成的 instance 列表. show p|proc|processlist [from <yyyy-M ...

  9. bzoj1706 relays 奶牛接力跑 线性代数

    题目描述 FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们的日常锻炼项目.至于进行接力跑的地点 自然是在牧场中现有的T(2 <= T <= 100) ...

  10. css的书写位置+元素分类

    1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...