js实现图片跟随鼠标移动

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

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


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

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

代码如下:

大致过程无非就是:

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

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

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

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

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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容