前端案例-跟随鼠标移动的天使

📋 个人简介

💖 作者简介：大家好，我是阿牛，全栈领域新星创作者。😜
📝 个人主页：馆主阿牛🔥
🎉 支持我：点赞👍+收藏⭐️+留言📝
📣 系列专栏：硬泡 javascript🍁
💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

前言

今天继续写一写前端小demo来复习回顾一下知识点，依旧是很有趣的案例，分享给大家。

题目

让这个天使图片跟随鼠标移动。

思路

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            position:absolute;
        }
    </style>
</head>
<body>
    <img src="img/tianshi.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            var x = e.pageX;
            var y = e.pageY;
            // 不要忘记给left 和 top添加px单位,然后给x和y坐标减一点值使得鼠标指在天使中心。
            pic.style.left = x - 30 + 'px';
            pic.style.top = y - 40 + 'px';
        })
    </script>
</body>
</html>