<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        img{

            position: absolute;   /*因为跟着鼠标移动，不占用位置，所以使用绝对定位*/

        }

    </style>

</head>

<body>

    <img src="./images/tianshi.jpg" alt="">

    <script>

        var pic = document.querySelector('img')

       document.addEventListener('mousemove',function(e){

           //1.mousemove 只要鼠标移动1px 就会除服事件

           //2.核心原理：每次鼠标移动，我们都会获取最新的鼠标坐标，把这个x和y坐标作为图片的top和left值

           //就可以移动图片了

           var x = e.pageX;

           var y= e.pageY; //page返回的是从可以滚动条的最顶端开始到鼠标点击Y轴的坐标    ie9+以上支持  最常用

           console.log(x,y)

           pic.style.left=x + 'px';   //注意一定要增加单位

           pic.style.top=y + 'px';

       })

    </script>

</body>

</html>

js 图片跟随鼠标移动效果 案例的更多相关文章

  1. JS 图片跟随鼠标移动案例

    css代码 img { position: absolute; /* top: 2px; */ width: 50px; height: 50px; } HTML代码 <img src=&quo ...

  2. js图片跟随鼠标移动

    <div id="wrapper"><img src="http://images.cnblogs.com/cnblogs_com/rain-null/ ...

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

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

  4. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  5. JS图片自己主动轮换效果实现

    今天不在状态,五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自己主动轮换效果,先看图片 以下是详细的代码,还是比較简单的. <!DOCTYPE ht ...

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

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

  7. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  8. Js 图片轮播渐隐效果

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

  9. Unity3D GUI中的图片跟随鼠标旋转脚本

    var Mid : Texture2D; var mouse : Texture2D; //鼠标图片 var mousePs = Vector2.zero; //鼠标的位置 private var a ...

随机推荐

  1. Spring Boot项目的不同启动方式

    方式一: 直接通过IntelliJ IDEA启动,直接执行Spring Boot项目的main()方法. 方法二: 将项目打包成jar包,首先需要在pom.xml文件的根节点下添加如下配置: < ...

  2. 解决在进行socket通信时，一端输出流OutputStream不关闭，另一端输入流就接收不到数据

    输出的数据需要达到一定的量才会向另一端输出,所以在传输数据的末端添加 \r\n 可以保证不管数据量是多少,都立刻传输到另一端.

  3. C++内存管理：简易内存池的实现

    什么是内存池? 在上一篇 C++内存管理:new / delete 和 cookie中谈到,频繁的调用 malloc 会影响运行效率以及产生额外的 cookie, 而内存池的思想是预先申请一大块内存, ...

  4. shell脚本 用户登录服务器发送钉钉提醒

    一.企业微信配置 1.获取AgentId(AppID).Secret .CropID.部门ID 创建一个企业微信应用获取到AgentId(AppID).Secret 2.获取CropID,点击 &qu ...

  5. 一文详解 纹理采样与Mipmap纹理——构建山地渲染效果

    在开发一些相对较大的场景时,例如:一片铺满相同草地纹理的丘陵地形,如果不采用一些技术手段,就会出现远处的丘陵较近处的丘陵相比更加的清晰的视觉效果,而这种效果与真实世界中近处的物体清晰远处物体模糊的效果 ...

  6. cmcc_simplerop

    这是一道系统调用+rop的题. 先来就检查一下保护. 32位程序,只开启了堆栈不可执行.ida看一下伪代码. 代码也很简洁,就是直接让你溢出.这里ida反汇编显示的v4具体ebp的距离是0x14,再加 ...

  7. 保留重复项（Power Query 之 M 语言）

    数据源: "姓名""基数""个人比例""个人缴纳""公司比例""公司缴纳"&qu ...

  8. bootstrap栅格例子

    <div class="container-fluid "> <div class="row"> <div class=" ...

  9. Java 将PDF转为线性PDF

    线性化PDF文件是PDF文件的一种特殊格式,可以通过Internet更快地进行查看.线性化的PDF,在页面数量很多的情况下,更能突出表现出快速浏览的优势.下面是通过后端Java程序实现将PDF文件转为 ...

  10. Clusternet 成为首批通过工信部开源成熟度评估项目！！！

    Clusternet 作为首批项目参与了<信息技术 开源 开源项目评估模型参考架构>测评,并成为通过评估的四个项目之一.<信息技术 开源 开源项目评估模型参考架构>由国防科技大 ...