鼠标移动特效,跟随鼠标移动的图片代码要怎么写?
一、首先找一张小图片,并将定位设置为绝对定位position: absolute,代码如下。
<style>
img {
position: absolute;
top: 2px;
}
</style>
<img src=" images/angel . gif" alt="">
二、将鼠标对象的坐标赋值给图片的top与left样式属性,插入的JS代码如下:
<script>
var pic = document. querySelector( ' img' );
document . addEventListener(”mousemove',function(e) {
// 1. mousemove只要我们鼠标移动1px就会触发这个事件
// 2.核心原理:
每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x和y坐标做为图片的top和1eft值
就可以移动图片
var x = e.pagex;
var y = e.pageY;
//3 .千万不要忘记给left和top添加px单位
pic.style.left = x + 'px';
pic.style.top = y + 'px' ;
});
</script>
|