<!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. Orcale 数据加载

    CSV 逗号分隔值格式文件 1,若要加载的文件不是CSV格式,可以修改数据文件,用分隔符来替换逗号:也可以修改控制文件,将FIELDS TERMINATED BY的值改为实际的分隔符. eg, 要向s ...

  2. mysql死锁com.mysql.cj.jdbc.exception.MYSQLTransactionRollbackException Deadlock found when trying to get lock;try restarting transaction

    1.生产环境出现以下报错 该错误发生在update操作中,该表并未建立索引,也就是只有InnoDB默认的主键索引,发生错误的程序是for循环中update. 什么情况下会出现Deadlock foun ...

  3. Dubbo多版本控制

    当系统进行升级时,一般都是采用"灰度发布(又称为金丝雀发布)"过程.即在低压力时段,让部分消费者先调用新的提供者实现类,其余的仍然调用老的实现类,在新的实现类运行没有问题的情况下, ...

  4. linux系统的一些常用命令

    cd 进入某个目录 ifconfig 查看本机的ip cp (要复制的文件的位置) (要把文件复制的位置) ll 查看文件下,文件的操作权限 ls查看该文件夹下的有那些文件和文件夹 vi filena ...

  5. 结合redis缓存的方式，查询和展示分类信息

    package cn.itcast.travel.service.impl;import cn.itcast.travel.dao.CategoryDao;import cn.itcast.trave ...

  6. Django auth

    auth是django一个自带的用户验证系统,使用它可以减少我们的开发流程. 基本使用 大体流程: 自定义类 from django.contrib.auth.models import Abstra ...

  7. 【JavaWeb】【学习】【过滤器】Filter 的简单应用

    实现效果 在编辑框中输入暗号:如果暗号正确,则跳转到正确页面:如果暗号错误,则跳转到错误界面. [入口界面] [错误界面] [成功界面] [项目结构] JSP文件 本练习有两个jsp页面 页面1:in ...

  8. Gitlab Flow到容器

    一.简介 长话短说,本文全景呈现我司项目组gitlab flow && devops Git Flow定义了一个项目发布的分支模型,为管理具有预定发布周期的大型项目提供了一个健壮的框架 ...

  9. Windows10计算文件SHA1 SHA256 SHA384 SHA512 or MD5

    目录 Windows10计算文件SHA1 SHA256 SHA384 SHA512 or MD5? 1.计算SHA1 2.计算SHA256 3.计算SHA384 4.计算SHA512 5.计算MD5 ...

  10. java数据类型：集合存储元素类型限制<泛型> ；自定义类指定泛型<T> 以及限制用法；派生子类泛型<T> super(泛型内参数)； 泛型通配符？以及?限制用法

    问题背景 Java 集合有个缺点,把一个对象"丢进"集合里之后,集合就会"忘记"这个对象的数据类型,当再次取出该对象时 该对象的编译类型就变Object类型(其 ...