JavaScript 实现鼠标移动时实时获取其相对盒子的偏移

news/2024/7/3 2:14:49

实现思路:

1. 获得盒子相对于页面的偏移量 div.offsetTop和div.offsetLeft

2. 获得鼠标相对于页面的偏移量 e.pageY和e.pageX

3. 前两者相减即可获得鼠标相对于盒子上沿和左侧的偏移

4. 使用鼠标移动事件 mousemove

实现效果:

 代码

<!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>PC端特效</title><style>*{margin: 0;padding: 0;}div {width: 200px;height: 200px;padding: 10px;margin: 100px;border: solid 2px #1B5E20;background-color: #E8F5E9;}</style>
</head>
<body><div></div><script>var div = document.querySelector('div');div.addEventListener('mousemove',function(e){var top = e.pageY-div.offsetTop;var left = e.pageX-div.offsetLeft;console.log('鼠标距离盒子的上沿'+top+"px,距离左侧"+left+"px。");});</script>
</body>
</html>


http://lihuaxi.xjx100.cn/news/240771.html

相关文章

【播放器SDK】Android如何实现固定竖屏播放视频

安卓的固定竖屏播放并不受手机是否开启旋转的限制&#xff0c;需要用户设置Activity为固定竖屏。目前带皮肤的播放器内部对竖屏播放视频做了一定的支持.用户使用相对比较简单. 带皮肤播放器 参考Demo代码FixedSkinActivity 1.在onCreate里面设置当前Activity为固定竖屏模式. se…

JavaScript实现鼠标拖拽登录框

拖拽的本质是登录框获得光标的偏移来调整自身的偏移。 拖拽发生时&#xff0c;光标相对盒子的坐标不会变化&#xff0c;相对于页面的坐标却在变化&#xff0c;二者的差值就是盒子需要的。 两个注意点&#xff1a; 1. 赋值给盒子的什么属性 outer.style.top e.pageY - y p…

第七篇:数据预处理(四) - 数据归约(PCA/EFA为例)

前言 这部分也许是数据预处理最为关键的一个阶段。 如何对数据降维是一个很有挑战&#xff0c;很有深度的话题&#xff0c;很多理论书本均有详细深入的讲解分析。 本文仅介绍主成分分析法(PCA)和探索性因子分析法(EFA)&#xff0c;并给出具体的实现步骤。 主成分分析法 - PCA 主…

命令别名的设置alias,unalias

alias命令的作用是为系统中的命令设置别名&#xff0c;如果常用命令比较长&#xff0c;那么为其设置别名可以简化用户操作&#xff0c;例如为ls -l | more命令设置别名lm&#xff0c;这样只需要输入lm就可以得到和 ls -l | more相同的效果;为rm -i设置别名为rm&#xff0c;可以…

Python自动化测试白羊座-week3切片+元组

name zcl,py,zyznames [zcl,py,zyz]print(names[0])print(names[0:2]) #切片就是从里面取几个元素, 从第几个取到第几个结束.取值时顾头不顾尾.print(names[1])#切片操作对字符串也适用name1[zcl,py,zyz]print(name1[2])num list(range(10)) #用range生成列表&#xff0c;需…

区分json与jsonp

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别&#xff0c;但其实他们根本不是一回事儿,下边简单区分概括一下&#xff1a; JSON是一种数据交换格式&#xff0c;而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。…

JavaScript 立即执行函数的两种写法

(function(str){console.log(str欢迎你~);})(行步至春深);(function(str) {console.log(str欢迎你~);}(行路易知难)); 可以看到&#xff0c;每种写法都比平常多出两个小括号&#xff0c;其中一个可以看作是调用&#xff0c;里面装参数&#xff0c;另一个可以看作防止语法错误。…

Javascript 移动的海绵宝宝

效果描述&#xff1a; 做一个简单的动画效果&#xff0c;刚刷新页面时&#xff0c;SpongeBob在页面的左上角位置&#xff0c;随着时间推移&#xff0c;他匀速向右移动&#xff0c;直到右侧抵达页面右侧停下来。 分析&#xff1a; SpongeBob作为一张图片被存放在<img>里…