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

让图片随着鼠标的移动而移动，我们先使用事件对象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>

精灵随着鼠标的移动而移动相关推荐

【Unityamp;NGUI】UI精灵跟随鼠标移动
NGUI的背包系统UI,有时候会发生鼠标与UI精灵不跟随的问题 1.直接在UIDragDropItem文件里面把下面的函数改动如下 protected virtual void OnDragDropM ...
鼠标点击某处, 让精灵移动到该处 (如下图) 鼠标移动时, 让精灵跟随鼠标移动
今天这个最有意思 <!DOCTYPE html> <html><head><meta charset="UTF-8"><sty ...
Java实现按键精灵（鼠标篇）
实现效果背景对于日常刷课每十分钟点击"继续学习"的行为,或者说是单机游戏里某项重复的行为想使其实现"自动化".我们可以通过JavaFx里的Robot类来实现 ...
精灵跟随鼠标移动以及鼠标图标的显示与关闭
今天讲一点小知识,如何让某对象跟着鼠标移动呢,如何让鼠标箭头被隐藏,接下来我用代码来解释.(注意:我用的是NGUI创建的精灵,代码上定义精灵和unity自带的精灵有一丢丢区别).spriteTest精 ...
按键精灵---大漠鼠标真实移动轨迹
大漠鼠标真实移动轨迹 RealMove 500,200Sub RealMove(x1,y1)Dim x, y, movernd, sudu, Delayrndmovernd = 5//每次移动抖动的随 ...
按键精灵——键盘鼠标
按键正确写法 KeyPress 65,1//按[A]键1次 KeyPress 66,2//按[B]键2次 KeyPress "D",100//按[D]键100次错误写法不能& ...
鼠标点击某处时可以让小精灵移动到鼠标点击的地方, 让精灵跟随鼠标移动
鼠标点击页面某处的时候可以让小精灵移动到该处 css代码: <style>html,body {height: 100%;width: 100%;background-color: bla ...
按键精灵-3-按键精灵键盘鼠标命令
1.键盘命令按下键盘上的某一个键并弹起的动作被称为按键.对应命令格式为: KeyPress 按键码,次数 SayString: 可以在编辑器的基本命令里查询按键码例如要实现组合命令的必杀技&quo ...
pygame学习笔记——检测鼠标碰到、点击图片
一.碰到效果实现思路 1.坐标检测时刻检测鼠标的坐标,有没有移到目标图片的坐标范围内,此方法无法准确描述不规则图像的坐标范围. 2.精灵碰撞检测创建一个鼠标精灵类,创建鼠标对象,一直跟着鼠标移动, ...

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

精灵随着鼠标的移动而移动相关推荐

最新文章

热门文章