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

换了个好看的糖果照片，想给博客首页加上，但是加上后，应该是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. 3. 单元测试框架（unittest）1——TestCase

    1. import unittest 引入unittest模块:   2. class SearchTest (unittest.TestCase): 定义一个继承于TestCase类的子类:   3 ...

  2. 【CF932E】Team Work

    题目 luogu的Romtejudge挂了我就当我过了吧 求 \[\sum_{i=1}^n\binom{n}{i}i^k\] 其实是个思博套路题,但是我现在这个水平还是刷刷板子吧 处理\(x^k\)是 ...

  3. VS2005进行WORD文档开发

    折腾了将近一个月的WORD文档开发终于告一段落.这件事已经很多大牛已经做过了.并且很多方法都已经非常详细,提供的资料也非常齐全.不过由于时间的久远并且较为散乱.所以我在学习时间过程中还是走了一些些弯路 ...

  4. iOS汇编系列-汇编入门

    概述 汇编语言(Assembly Language)用符号代替了0和1,比机器语言更便于阅读和记忆. 但是同样汇编语言同样指令太多不便于记忆,就出现了高级语言.C\C++\Java\Swift等,更接 ...

  5. Unity 在2D中实现LookAt

    由于Transform.LookAt是使Z轴看向目标,而2D基本是由X和Y轴构成的.所以在2D的游戏中,不太好使用. 所以用代码实现一个2D的LookAt函数. 例子: 我们使怪物的眼睛一直看着云. ...

  6. SQL的特点

    1.综合统一 2.高度非过程化 3.面向集合的操作方式 4.一同一种语法结构提供两种使用5.语言简洁易学易用

  7. C# 窗体内容显示不全

    在T430上安装skyline的CS版时候,发现登陆窗口显示的内容不全,第二个缓冲的窗口也显示不全.设置了下面的参数后就可以了.

  8. 利用TensorFlow识别手写的数字---基于Softmax回归

    1 MNIST数据集 MNIST数据集主要由一些手写数字的图片和相应的标签组成,图片一共有10类,分别对应从0-9,共10个阿拉伯数字.原始的MNIST数据库一共包含下面4个文件,见下表. 训练图像一 ...

  9. Math concepts / 数学概念

    链接网址:Math concepts / 数学概念 – https://www.codelast.com/math-concepts-%e6%95%b0%e5%ad%a6%e6%a6%82%e5%bf ...

  10. 通过游戏学python 3.6 第一季 第二章 实例项目 猜数字游戏--核心代码--猜测次数 可复制直接使用 娱乐 可封装 函数

      猜数字游戏--核心代码--猜测次数   #猜数字--核心代码--猜测次数 number=33 amount=3 count=0 while count<=amount: conversion ...