今天做一個天使跟著我的滑鼠一直動的小案例，簡單又有趣呢！
讓我先來展示下今天做出來的最后結果吧
做這個首先準備一張好看的天使動圖，這樣在滑鼠移動的時候天使煽動翅膀就仿佛在飛一樣！
在正式做之前我們先來分析分析此案例：
- 滑鼠不斷地移動，使用滑鼠移動事件：mousemove
- 在頁面中移動，給 document 注冊事件
- 圖片要移動距離，而且不占位置，我們使用絕對定位即可
- 核心原理：每次滑鼠移動，我們都會獲得最新的滑鼠坐標，把這個X和Y坐標做為圖片的 top 和 left 值就可以移動圖片
分析完了就到了寫代碼的時間了，寫代碼時間很開心的事情！
先插入圖片，并給其設定為絕對定位，再用滑鼠移動事件實時獲取滑鼠哦坐標，并賦給圖片的 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="../images/angel.gif" alt="">
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove', function (e) {
//mousemove 只要我們滑鼠移動 1px 就會觸發這個事件
// console.log(e.pageX);
// console.log(e.pageY);
var x = e.pageX;
var y = e.pageY;
img.style.top = y - 50 + 'px';
img.style.left = x - 40 + 'px';
})
</script>
</body>
</html>注意：
- 千萬不要忘記給 left 和 top 添加 px 單位，否則不能實作效果
- 圖片默認時左上角對齊滑鼠，想要實作滑鼠在圖片中間就要把坐標移一移
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/340789.html
標籤：其他