当前位置: 首页 > news >正文

精灵随着鼠标的移动而移动

让图片随着鼠标的移动而移动,我们先使用事件对象e.pageX,e.pageY来获取鼠标的坐标,然后将鼠标的坐标传递给图片定位的位置,就能实现图片随鼠标一起移动。
在这里插入图片描述
直接上代码,其实挺简单的。里边有注释。

<!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>图片随鼠标移动案例</title><style>img {/* 给图片添加绝对定位,使其不会占用位置 */position: absolute;width: 100px;}</style>
</head>
<body><img src="./images/皮卡丘.jpg" alt=""><script>var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {// 获取鼠标移动的坐标var x = e.pageX;var y = e.pageY;// console.log(x,y);// 将获取到的鼠标位置传给图片的top和leftpic.style.left = x - 50 + 'px';pic.style.top = y - 50 + 'px';})</script>
</body>
</html>

http://www.taodudu.cc/news/show-6105723.html

相关文章:

  • 【cocos2D-X】Plist使用 实现 移动精灵多图片动画
  • 移动设备上“精灵图”的制作适配
  • cocos2dx 精灵的移动(2)
  • Cocos2d-x 2.0 百例精讲:如何让一个精灵跟随触点移动
  • 在屏幕的任意位置拖拽,控制精灵移动
  • 精灵的移动效果,旋转效果
  • 【JavaScript】实现移动小精灵
  • 让视角随着精灵移动
  • 移动设备上“精灵图”的制作
  • 移动端精灵图的使用
  • Cocos2d-x随记(2)-精灵移动
  • buntu22.04安装WPS中文版(一百一十八)
  • 数数
  • 视网膜数据集(2)Messidor
  • realsense 相机的部分信息获取
  • Linux线程数和系统线程数查看
  • 数的表示与运算
  • 如何判断一个数是否是NaN
  • SQLite获取查询结果数
  • 用while循环写四叶玫瑰数(自幂数)
  • 【算法讲20:Dsu on Tree】树上数颜色 | Lomsat gelral
  • Deep_Learn关于数组和数的操作
  • codeforces1670F Jee, You See?(DP/位运算/前缀和/组合数)
  • SEEM~
  • SEE
  • 对random.seed()的理解
  • 对random.seed()函数的理解
  • delphi 多线程3
  • R统计绘图-corrplot热图绘制细节调整2(更改变量可视化顺序、非相关性热图绘制、添加矩形框等)
  • 安卓串口——谷歌android_serialport_api studio使用以及相关问题