<!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. 【Linux】【Problems】在fedora 9上解决依赖问题

    summary: 在32bit的fedora9上安装EMC客户端遇到无法解决的依赖问题 detail: rpm 安装: [root@hcszmons02 tmp]# rpm -ivh lgtoclnt ...

  2. 通过Jedis操作Redis

    package com.yh; import org.junit.After; import org.junit.Before; import org.junit.Test; import redis ...

  3. 1.RabbitMQ

    1.RabbitMq是什么?    MQ全称为Message Queue,即消息队列, RabbitMQ是由erlang语言开发,基于AMQP(Advanced Message Queue 高级消息队 ...

  4. 声临其境，轻松几步教你把音频变成3D环绕音

    在音乐创作.音视频剪辑和游戏等领域中,给用户带来沉浸式音频体验越来越重要.开发者如何在应用内打造3D环绕声效?华为音频编辑服务6.2.0版本此次带来了空间动态渲染功能,可以将人声.乐器等音频元素渲染到 ...

  5. 20个ios登陆界面

    原文:http://favbulous.com/post/1001/24-unique-ios-login-screen-showcase Eeve Evernote Food Recood Hips ...

  6. Wireshark基本使用(1)

    原文出处: EMC中文支持论坛 按照国际惯例,从最基本的说起. 抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要 ...

  7. Python 中更安全的 eval

    问题 想要将一段列表形式的字符串转为 list,但是担心这个动态的字符串可能是恶意的代码?使用 eval 将带来安全隐患.比如: # 期望是 eval('[1, 2, 3]') # 实际上是 eval ...

  8. [BUUCTF]REVERSE——新年快乐

    新年快乐 附件 例行查壳儿,32位程序,upx加壳儿 利用网上找到的脱壳儿工具,拿到了去壳儿后的程序 32位ida打开,shift+f12查看程序里的字符串,得到了关于flag的提示 双击,ctrl+ ...

  9. oracle11gR2、client及plsql完整安装与配置

    本文主要介绍Oracle11g,client及PLSQL的安装过程 一,oracle安装 安装环境:虚拟机win7 64 1.点击目录中 setup.exe文件 2.配置安全更新中,取消通过my or ...

  10. AT1381 エンド・オブ・ビギニング 题解

    Content 有 \(n\) 组询问,每组询问给定三个字符串 \(s_1,s_2,s_3\). 如果 \(s_1\) 是 BEGINNING,输出 \(s_3\) 的第一个字符. 如果 \(s_1\ ...