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

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

本帖最后由 马黑黑 于 2023-7-22 08:49 编辑 <br /><br /><style>
#mybox {
    position: fixed;
    left: 50%;
    top: 70%;
    font: normal 30px sans-serif;
    user-select: none;
}
</style>

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

<div id="mybox">&#127810;</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:15

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

<div id="mybox">&#127810;</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 提供很多基于本例所用到的和没有用到的属性和方法去解决所有的细节，不过需要强大的算力，实现代码也会复杂、繁多。以简洁的方式处理问题是明智的，除非必要，尽可能不去令实现目标的手段复杂化。

焱鑫磊 发表于 2023-7-22 08:42

欣赏学习！{:4_187:}

红影 发表于 2023-7-22 08:50

这个真的是翻页后一直保持在上一个位置呢，有趣。学习了{:4_187:}

红影 发表于 2023-7-22 08:52

这个可以做互动的玩了，比如用鼠标把柴火移动到锅子下面，只要到了需要的位置，火就烧起来，移开火就灭了。肯定很好玩{:4_173:}

马黑黑 发表于 2023-7-22 08:52

红影 发表于 2023-7-22 08:50
这个真的是翻页后一直保持在上一个位置呢，有趣。学习了

fixed 定位的特性，它基于视口，内容则“流动”在其下

马黑黑 发表于 2023-7-22 08:53

焱鑫磊 发表于 2023-7-22 08:42
欣赏学习！

早上好

马黑黑 发表于 2023-7-22 08:54

红影 发表于 2023-7-22 08:52
这个可以做互动的玩了，比如用鼠标把柴火移动到锅子下面，只要到了需要的位置，火就烧起来，移开火就灭了。 ...

这个设想很好。需要判断移动元素与目标元素是否靠近或重合，这是触发条件。

红影 发表于 2023-7-22 09:41

马黑黑 发表于 2023-7-22 08:54
这个设想很好。需要判断移动元素与目标元素是否靠近或重合，这是触发条件。

对呀，就是这个意思。然后延时一定时间后，锅子里的水开了，再跳出提示把柴火移走{:4_173:}

红影 发表于 2023-7-22 09:43

马黑黑 发表于 2023-7-22 08:52
fixed 定位的特性，它基于视口，内容则“流动”在其下

“fixed 定位的特性”，嗯，通过这个例子，对这个特性眼见为实了。谢谢黑黑{:4_187:}

马黑黑 发表于 2023-7-22 11:06

红影 发表于 2023-7-22 09:41
对呀，就是这个意思。然后延时一定时间后，锅子里的水开了，再跳出提示把柴火移走

构思不错。等你去实现。

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

红影 发表于 2023-7-22 09:43
“fixed 定位的特性”，嗯，通过这个例子，对这个特性眼见为实了。谢谢黑黑

这是比较常见的定位用法，早期他们做帖，做全屏特效，都用到这个 fixed

红影 发表于 2023-7-22 14:20

马黑黑 发表于 2023-7-22 11:06
构思不错。等你去实现。

我只会胡思乱想，不会编写代码。{:4_173:}

红影 发表于 2023-7-22 14:20

马黑黑 发表于 2023-7-22 11:07
这是比较常见的定位用法，早期他们做帖，做全屏特效，都用到这个 fixed

黑黑也用过的吧？只是没注意它的功效。

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

红影 发表于 2023-7-22 14:20
黑黑也用过的吧？只是没注意它的功效。

fixed 必须用过的

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

红影 发表于 2023-7-22 14:20
我只会胡思乱想，不会编写代码。

写写也不是什么大问题

红影 发表于 2023-7-22 22:32

马黑黑 发表于 2023-7-22 21:59
fixed 必须用过的

是啊，所以看到它也不觉得陌生。{:4_173:}

红影 发表于 2023-7-22 22:32

马黑黑 发表于 2023-7-22 21:59
写写也不是什么大问题

算了吧，我可没那么大本事。

马黑黑 发表于 2023-7-22 23:13

红影 发表于 2023-7-22 22:32
算了吧，我可没那么大本事。

试试也许有
页: [1] 2 3 4 5
查看完整版本: 让元素粘着鼠标指针改进版