跟随鼠标的天使案例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            position:absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
<img src="images/angel(1).gif" alt="">
<script>
    var img=document.querySelector("img");
    document.addEventListener('mousemove',function(e){
        var x=e.pageX;
        var y=e.pageY;
        img.style.left=x-50+"px";
        img.style.top=y-40+"px";
    })
</script>
</body>
</html>

关键代码：

1,mousemove  鼠标移动事件，只要鼠标移动1px , 就会触发这个事件

2,核心原理，鼠标每次移动，就会获得新的鼠标的坐标值，把这个x和y坐标值给图片的 left 和 top值，就能实现图片跟随鼠标移动

3，改进

img.style.left=x-50+"px";
img.style.top=y-40+"px";

图片跟随鼠标的移动，鼠标始终在图片的左上角，想要把鼠标放在图片的正中心，需要把图片向上移动自身高度的一半，想左移动自身宽度的一半

posted @ 2019-09-07 15:26  shanlu  阅读(701)  评论(0)  编辑  收藏  举报