<!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. Redis 高并发解决方案

    针对大流量瞬间冲击,比如秒杀场景 redis前面可以加一层限流 sentinel / Hystrix redis高并发(读多写少)下缓存数据库双写误差: 1. 修改操作使用分布式锁(就是修改的时候加锁 ...

  2. 【spring AOP】@Pointcut的12种用法

    @Pointcut用来标注在方法上来定义切入点. 使用格式:@ 注解(value="表达标签 (表达式格式)").如:@Pointcut("execution(* com ...

  3. Spring Cloud 和dubbo

    一.SpringCloud微服务技术简介 Spring Cloud 作为Java 语言的微服务框架,它依赖于Spring Boot,有快速开发.持续交付和容易部署等特点.Spring Cloud 的组 ...

  4. 使用fastDFS上传和下载图片文件

    package com.xuecheng.test.fastdfs;import org.csource.common.MyException;import org.csource.fastdfs.* ...

  5. 【软件安装与配置】【Java】Eclipse For Java EE的安装

    Eclipse For Java EE的安装 哔哩哔哩:萌狼蓝天 微信公众号:萌狼蓝天 博客:萌狼工作室 00 提前说明 因为编程涉及的环境配置资源比较多,所以我专门创建了一个文件夹(Developm ...

  6. 了解LINQ

    本文主要的是泛谈LINQ是啥?以及常见的用法大纲如下: LINQ的那些根基 LINQ的一些基本用法 LINQ的根基 IEnumerable和IEnumerator 为啥能够被foreach? 实际上, ...

  7. centos源码安装ruby

    目录 一.简介 二.程序部署 一.简介 Ruby,一种简单快捷的面向对象(面向对象程序设计)脚本语言.rvm是ruby的管理器,可以切换ruby版本,下载ruby. 二.程序部署 1.下载ruby w ...

  8. Kubernetes-存储(二)

    前言 本篇是Kubernetes第十三篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战. Kubernetes系列文章: Kubernetes介绍 Kubernetes环境搭建 Kubern ...

  9. linux小应用 —— 日志过滤

    先说问题,统计一个日志文件中去重之后的ip地址的个数.其实这是一个非常常见也比较简单的问题,其中我个人认为最主要的应该是匹配ip地址是这个问题的核心.剩下的就是对linux命令的熟练程度的问题了.首先 ...

  10. [HarekazeCTF2019]baby_rop

    看到名字就想到了用rop来做这道题 老样子chescksec和file一下 可以看到是64位的程序开启了nx保护,把程序放到idax64里 可以看到有system和/bin/sh,/bin/sh无法跟 ...