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

📋 个人简介

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

前些天发现了一个比较好的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。

点击跳转到网站：人工智能学习

上期传送门：
👉四行js代码让别人无法复制你的网站文字，八行程序员都哭了
👉这些前端案例看似很简单（内附动图）
👉前端实现tab栏切换，这么常见的案例你学会了吗？

前言

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

题目

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

思路

1.鼠标不断的移动，使用鼠标移动事件： mousemove 。
2.在页面中移动，给 document 注册事件。
3.图片要移动距离，而且不占位置，我们使用绝对定位即可。
4.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个 x 和 y 坐标作为图片的 top 和 left 值就可以移动图片。、

代码实现

<!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>