美文网首页
js实现图片跟随鼠标移动

js实现图片跟随鼠标移动

作者: 他一定比我温柔 | 来源:发表于2021-05-14 22:54 被阅读0次

这次做的是和鼠标移动然后不断获取坐标相关的一个小功能。

这里视频放不了就不放了,大家可以直接复制代码运行就行

这次相对来说轻松一些毕竟总共代码行也就三十几行,掐头去尾也就十几行。

因为只是为了实现这个小功能,所以也就没有考虑美观等方面。图片是张GIF图,网上随便找的。

代码如下:

大致过程无非就是:

先插入一张图片,然后获取这张图片,获取鼠标移动的坐标,然后改变图片的位置,使图片跟着自己的鼠标移动而移动。

这里面eventTarget(目标对象).addEventListener()是一种事件监听的方式。

括号里面的mousemover是指事件为鼠标移动的意思。

后面函数就是为了实现鼠标移动具体要实现的功能

e.pageX/Y是指获取当前的坐标

下面pic.style.left/top意思就是用来鼠标移动时使得图片改变样式,里面减去了30和25目的只是为了图片能在鼠标的中间,不减也行,但是鼠标会在图片的左上角。

这里面需要注意的小细节是px问题。在我们改变图片位置的时候如果只写

pic.style.left = x是没有用的,一定不要忘记在后面加上单位。

这次的源码就不放微云了。

相关文章

网友评论

      本文标题:js实现图片跟随鼠标移动

      本文链接:https://www.haomeiwen.com/subject/jnbcjltx.html