这次做的是和鼠标移动然后不断获取坐标相关的一个小功能。
这里视频放不了就不放了,大家可以直接复制代码运行就行
这次相对来说轻松一些毕竟总共代码行也就三十几行,掐头去尾也就十几行。
因为只是为了实现这个小功能,所以也就没有考虑美观等方面。图片是张GIF图,网上随便找的。
代码如下:
大致过程无非就是:
先插入一张图片,然后获取这张图片,获取鼠标移动的坐标,然后改变图片的位置,使图片跟着自己的鼠标移动而移动。
这里面eventTarget(目标对象).addEventListener()是一种事件监听的方式。
括号里面的mousemover是指事件为鼠标移动的意思。
后面函数就是为了实现鼠标移动具体要实现的功能
e.pageX/Y是指获取当前的坐标
下面pic.style.left/top意思就是用来鼠标移动时使得图片改变样式,里面减去了30和25目的只是为了图片能在鼠标的中间,不减也行,但是鼠标会在图片的左上角。
这里面需要注意的小细节是px问题。在我们改变图片位置的时候如果只写
pic.style.left = x是没有用的,一定不要忘记在后面加上单位。
这次的源码就不放微云了。