鼠标移动特效，跟随鼠标移动的图片代码要怎么写？
一、首先找一张小图片，并将定位设置为绝对定位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>
|
