让元素粘着鼠标指针

马黑黑

点击本页最左上方的四叶草（希望你能看见它），鼠标移动哪儿它就跟到哪儿。再点击四叶草，解除它的粘性。

🍀

马黑黑

代码

1. <style>
   
2. #mybox {
   
3.     position: absolute;
   
4.     left: 0;
   
5.     top: 0;
   
6.     font: normal 30px sans-serif;
   
7.     user-select: none;
   
8. }
   
9. </style>
   
10. 
    
11. <p>点击本页左上方的四叶草（希望你能看见到），鼠标移动哪儿它就跟到哪儿。再点击四叶草，解除它的粘性。</p>
    
12. <div id="mybox">&#127808;</div>
    
13. 
    
14. <script>
    
15. let canmove = false;
    
16. mybox.onclick = () => canmove = !canmove;
    
17. document.onmousemove = (e) => {
    
18.     if(canmove) {
    
19.         let xx = e.clientX - mybox.offsetWidth / 2, yy = e.clientY  - mybox.offsetHeight / 2;
    
20.         if(xx < 0) xx = 0;
    
21.         if(yy < 0) yy = 0;
    
22.         if(xx > window.innerWidth - mybox.offsetWidth) xx = window.innerWidth - mybox.offsetWidth;
    
23.         if(yy > window.innerHeight - mybox.offsetHeight) yy = window.innerHeight - mybox.offsetHeight;
    
24.         mybox.style.left = xx + 'px';
    
25.         mybox.style.top = yy + document.documentElement.scrollTop + 'px';
    
26.     }
    
27. }
    
28. </script>
    

复制代码

马黑黑

实现的大概原理：

通过 document 的鼠标移动事件，获得鼠标指针在浏览器视口的XY坐标（e.clientX/Y），减去移动元素的宽、高的一半（令元素移动时鼠标指针能在其中央），再通过元素的 style.left/top（CSS属性）驱动元素的移动。

获取鼠标指针XY坐标后，需要处理边界问题，用了几个if语句判断XY坐标是否超越最左、最上、最右和最下等四个边界。这个判断，没有考虑滚动条。但论坛有纵向滚动条，所以，再处理一下Y坐标的值。

整体有点粗糙，还应考虑和处理更多的因素。

马黑黑

友情提示：

四叶草跟随鼠标指针移动之时，鼠标选取文本等操作被拦截，需要解除四叶草的粘性后才恢复正常。

红影

这个有趣，把四叶草从左上移动到帖子里来了，一评分，它又自己回去了

红影

想让它到哪就到哪，好玩。快看，我把它粘在你烟卷上了

毋问我从哪里来

瞄一下标题差点以为粘鼠胶粘住老鼠了。

千羽

我也把它贴在黑黑老师的烟头上了

小辣椒

哎~~我居然找了蛮久才看见，笨的

马黑黑

小辣椒 发表于 2023-7-21 22:59
哎~~我居然找了蛮久才看见，笨的

马黑黑

红影 发表于 2023-7-21 13:31
这个有趣，把四叶草从左上移动到帖子里来了，一评分，它又自己回去了

评分后页面有局部刷新，我这个没有做闭包

马黑黑

千羽 发表于 2023-7-21 21:41
我也把它贴在黑黑老师的烟头上了

这个可以想象

马黑黑

红影 发表于 2023-7-21 13:33
想让它到哪就到哪，好玩。快看，我把它粘在你烟卷上了

我自己也试过

马黑黑

毋问我从哪里来 发表于 2023-7-21 16:35
瞄一下标题差点以为粘鼠胶粘住老鼠了。

也不是不可以

马黑黑

醉美水芙蓉 发表于 2023-7-21 19:38
这个手机浏览器低，只能飘过了！

手机浏览器没有鼠标指针的说法

马黑黑

醉美水芙蓉 发表于 2023-7-21 21:04
好玩！想到哪就到哪！

毋问我从哪里来

马黑黑 发表于 2023-7-21 23:05
也不是不可以

那就神了。

马黑黑

毋问我从哪里来 发表于 2023-7-21 23:06
那就神了。