css代码

  img {
position: absolute;
/* top: 2px; */
width: 50px;
height: 50px;
}

HTML代码

 <img src="../imges/u=3568135932,2181685849&fm=26&gp=0.jpg" alt="">

js代码

     <script>
var pic = document.querySelector('img')
document.addEventListener('mousemove', function (e) {
var x = e.pageX;
var y = e.pageY;
// 一定要给left和top添加px单位
pic.style.left = x + 'px';
pic.style.top = y + 'px'; })
</script>

效果图

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

  1. js 图片跟随鼠标移动效果 案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&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实现图片跟随鼠标移动

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

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

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

  7. jQuery 图片跟着鼠标动

    html默认鼠标样式改成图片时格式为 .ani 图片跟随鼠标挪动 html <div id="mouseImg"> <img src="images/问 ...

  8. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 模仿bootstrap做的 js tooltip (添加鼠标跟随功能)

    主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...

随机推荐

  1. 04 flask源码剖析之LocalStack和Local对象实现栈的管理

    04 LocalStack和Local对象实现栈的管理 目录 04 LocalStack和Local对象实现栈的管理 1.源码入口 1. flask源码关于local的实现 2. flask源码关于l ...

  2. java 基本语法(二) 变量的使用(重点)

    1.变量的分类1.1 按数据类型分类 详细说明://1. 整型:byte(1字节=8bit) \ short(2字节) \ int(4字节) \ long(8字节) //① byte范围:-128 ~ ...

  3. 爬虫04 /asyncio、selenium规避检测、动作链、无头浏览器

    爬虫04 /asyncio.selenium规避检测.动作链.无头浏览器 目录 爬虫04 /asyncio.selenium规避检测.动作链.无头浏览器 1. 协程asyncio 2. aiohttp ...

  4. Django框架07 /cookie和session

    Django框架07 /cookie和session 目录 Django框架07 /cookie和session 1. django请求生命周期 2. cookie 3. session 4. 总结 ...

  5. C#文件说明

    Bin -- 用来存放编译的结果,是默认的输出路径,项目属性—>配置属性—>输出路径. obj -- 用于存放编译过程中生成的中间临时文件.增量编译:项目属性—>配置属性—>高 ...

  6. Linux桌面进化史

    自 20 世纪 90 年代初期以来,Linux 桌面也已从简单的窗口管理器发展为成熟.完整的桌面.那么它究竟是如何一步步发展至今的呢?作为从 1993 年就开始使用 Linux 的资深用户,FreeD ...

  7. java-把生成的随机数,指定范围(如:100-200),指定打印次数(如:50次),并进行去重。

    package main.demo; public class Demo4 { /** * 随机指定范围内N个不重复的数 * 最简单最基本的方法 * @param min 指定范围最小值 * @par ...

  8. Makefile中的奇葩字符

    % : Makefile规则通配符,一般出现在目标或是依赖中 * : shell命令中的通配符,一般出现在命令中 $@:目标的名字 $^:所有依赖的名字 $<:第一个依赖的名字 $?:所有依赖中 ...

  9. vue使用select间相互绑定

    让这两个select相互绑定,让roleOptions选取值后,worklist弹出得是roleOptions值 <el-select v-model="postForm.projec ...

  10. R星游戏如何绑定二次验证码_虚拟MFA_两步验证_谷歌身份验证器?

    一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接 R星游戏如何绑定二次验证码_虚拟MFA_两步验证_谷歌身份验证器? 二次验证码小程序于谷歌身份验证器APP的优势 1.无需下载 ...