23_跟随鼠标的天使.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>跟随鼠标移动的天使</title>
        <style>

            img {
                position: absolute;      
                border: 1px solid black;
                
            }
        </style>
    </head>
        <body>

            <img src="image/angel.jfif" alt=""/>

            <script>
                document.addEventListener('mouseover', function(e){
                    var pic = document.querySelector('img');

                    // 1. mousemove只要鼠标移动1px 就会触发这个事件
                    // console.log(1);
                    // 2. 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，
                    // 把这个x和y坐标作为图片的top和left值，就可以移动图片
                    var x = e.pageX;
                    var y = e.pageY;
                    // 3. 千万不要忘记left和top添加px单位
                    pic.style.left = x + 'px';
                    pic.style.top = y + 'px';

                })
            </script>
        </body>
    </head>
</html>