让元素粘着鼠标指针改进版

马黑黑 · 发表于 2023-7-22 07:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-7-22 08:49 编辑

单击本页的树叶，树叶开始粘着鼠标指针，鼠标移到哪儿它跟到哪儿。解除其粘性，请再单击树叶。单击树叶是树叶是否有粘性的“开关”。

🍂

马黑黑 · 发表于 2023-7-22 07:15

代码

<style>
#mybox {
position: fixed;
left: 50%;
top: 70%;
font: normal 30px sans-serif;
user-select: none;
}
</style>
<div id="mybox">🍂</div>
<div style="height: 1000px"></div>
<script>
(function() {
let canmove = false;
mybox.onclick = () => canmove = !canmove;
document.onmousemove = (e) => {
if(canmove) {
let xx = e.clientX - mybox.offsetWidth / 2, yy = e.clientY - mybox.offsetHeight / 2;
if(xx < 0) xx = 0;
if(yy < 0) yy = 0;
if(xx > window.innerWidth - mybox.offsetWidth - 10) xx = window.innerWidth - mybox.offsetWidth - 10;
if(yy > window.innerHeight - mybox.offsetHeight) yy = window.innerHeight - mybox.offsetHeight;
mybox.style.left = xx + 'px';
mybox.style.top = yy + 'px';
}
}
})();
</script>

复制代码

马黑黑 · 发表于 2023-7-22 07:30

本帖最后由马黑黑于 2023-7-22 08:51 编辑

改进：

与第一版相比，CSS部分，#mybox 选择器设定的 position 为 fixed 定位，这是基于浏览器视口（即浏览器最大化时的浏览区域）的固定定位。第 03 行代码：

position: fixed;

由于使用了 fixed 定位，浏览器是否出现滚动条就可以视而不见，这样，① 在处理边缘边界时，不用考虑滚动条动态变化产生的XY坐标的复杂变化，无需对滚动条滚动时做编程；② 元素翻页后一直保持在上一个位置，体验性更好。

滚动条的实际占位会影响元素在边缘处靠近滚动条时元素的显示效果，而各浏览器的滚动条实践尺寸不尽一致，有粗有细，本例，第 23 行，给一个统一的数，10，以便保证元素不会“入侵”滚动条。

当然，JS 提供很多基于本例所用到的和没有用到的属性和方法去解决所有的细节，不过需要强大的算力，实现代码也会复杂、繁多。以简洁的方式处理问题是明智的，除非必要，尽可能不去令实现目标的手段复杂化。