相必各位在浏览一些网页时,会发现自己的鼠标会变成一个很可爱亦或是很帅气的图形,无形中也增加也页面的美感。js就可以实现这种效果
代码如下:
样式:<style>
img{
position: absolute;//这个定位很重要,否则会在后面的js代码中无法调节其移动
height: 50px;
width: 50px;
}
</style>
HTML代码:
<img src="../img/3.jpg" alt="" />//就简简单单插入一张图片就好了,博主省事了
js代码:
<script>
var img = document.getElementsByTagName("img")
document.addEventListener("mousemove",function(ev){
img[0].style.left = ev.pageX-25+"px";
img[0].style.top = ev.pageY-25+"px";
})
</script>
这样你就会发现你的图片和你的鼠标在一起移动了。
注:
函数中的ev就是Event
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。