马黑黑 发表于 2023-7-21 11:41

让元素粘着鼠标指针

本帖最后由 马黑黑 于 2023-7-21 12:45 编辑 <br /><br /><style>
#mybox {
    position: absolute;
    left: 0;
    top: 0;
    font: normal 30px sans-serif;
    user-select: none;
}
</style>

<p>点击本页最左上方的四叶草（希望你能看见它），鼠标移动哪儿它就跟到哪儿。再点击四叶草，解除它的粘性。</p>
<div id="mybox">&#127808;</div>

<script>
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) xx = window.innerWidth - mybox.offsetWidth;
      if(yy > window.innerHeight - mybox.offsetHeight) yy = window.innerHeight - mybox.offsetHeight;
      mybox.style.left = xx + 'px';
      mybox.style.top = yy + document.documentElement.scrollTop + 'px';
    }
}
</script>

马黑黑 发表于 2023-7-21 12:12

本帖最后由 马黑黑 于 2023-7-21 12:41 编辑

代码
<style>
#mybox {
    position: absolute;
    left: 0;
    top: 0;
    font: normal 30px sans-serif;
    user-select: none;
}
</style>

<p>点击本页左上方的四叶草（希望你能看见到），鼠标移动哪儿它就跟到哪儿。再点击四叶草，解除它的粘性。</p>
<div id="mybox">&#127808;</div>

<script>
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) xx = window.innerWidth - mybox.offsetWidth;
      if(yy > window.innerHeight - mybox.offsetHeight) yy = window.innerHeight - mybox.offsetHeight;
      mybox.style.left = xx + 'px';
      mybox.style.top = yy + document.documentElement.scrollTop + 'px';
    }
}
</script>


马黑黑 发表于 2023-7-21 12:22

本帖最后由 马黑黑 于 2023-7-21 12:44 编辑

实现的大概原理：

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

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

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

马黑黑 发表于 2023-7-21 12:25

本帖最后由 马黑黑 于 2023-7-21 12:45 编辑

友情提示：

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

红影 发表于 2023-7-21 13:31

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

红影 发表于 2023-7-21 13:33

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

毋问我从哪里来 发表于 2023-7-21 16:35

瞄一下标题差点以为粘鼠胶粘住老鼠了。{:5_160:}

醉美水芙蓉 发表于 2023-7-21 19:38

醉美水芙蓉 发表于 2023-7-21 21:04

千羽 发表于 2023-7-21 21:41

我也把它贴在黑黑老师的烟头上了{:4_173:}

小辣椒 发表于 2023-7-21 22:59

哎~~我居然找了蛮久才看见，笨的{:4_203:}

马黑黑 发表于 2023-7-21 23:04

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

{:4_172:}

马黑黑 发表于 2023-7-21 23:04

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

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

马黑黑 发表于 2023-7-21 23:05

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

这个可以想象

马黑黑 发表于 2023-7-21 23:05

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

我自己也试过{:4_170:}

马黑黑 发表于 2023-7-21 23:05

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

也不是不可以{:4_189:}

马黑黑 发表于 2023-7-21 23:06

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

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

马黑黑 发表于 2023-7-21 23:06

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

{:4_181:}

毋问我从哪里来 发表于 2023-7-21 23:06

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

那就神了。{:5_160:}

马黑黑 发表于 2023-7-21 23:09

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

{:4_181:}
页: [1] 2 3
查看完整版本: 让元素粘着鼠标指针