跟随鼠标的天使

核心思路

每次鼠标移动，我们通过鼠标事件对象得到最新鼠标在文档中的坐标，把这个x和y坐标给图片left和top值就可以移动图片（注意：鼠标要移动距离且不占有位置，需要绝对定位）

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器可视区的X坐标
e.clientX	返回鼠标相对于浏览器可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标
e.pageY	返回鼠标相对于文档页面的Y坐标
e.screenX	返回鼠标相对于电脑屏幕X坐标
e.screenY	返回鼠标相对于电脑屏幕Y坐标

/* 图片需要绝对定位 */ 
img {
    position: absolute;
    top: 0;
    left: 0;
}

//核心思路：每次鼠标移动，通过鼠标移动事件，获取鼠标位置，把鼠标位置作为图片的top和left值
    var pic = document.querySelector('img');
    document.addEventListener('mousemove', function(e) {
        //得到鼠标在文档页面的x坐标和y坐标
        var x = e.pageX;
        var y = e.pageY;
        //得到图片的宽度和高度
        var width = pic.offsetWidth;
        var height = pic.offsetHeight;
        //让鼠标在图片中间，图标跟随鼠标移动
        pic.style.left = x - width / 2 + 'px';
        pic.style.top = y - height / 2 + 'px';
    })

项目展示