目錄
前言
一、案例詳解
二、案例細節點
總結
前言
小編我又來和大家啊一起分享好東西了！期待嗎？
一、案例詳解
這個案例好多身邊的人都做過，但是那時候小編學的比較慢還沒有達到制作這個效果的階段，但是現在這個階段小編我學到了，開始的時候呢！看到他們做出來的時候我覺得好厲害，那時候我就開始各種腦補~~
這個是不是很難？
這個需要的代碼是不是很復雜是不是很多？
我什么時候才能學到這個地方？
結果感覺自己上當了，我做完這個時候一點成就感都沒有，感覺自己那時候像個傻子，虧我還羨慕良久，結果只是自己想的太多！
好了不說多了！說多了都是淚啊！給大家看看效果吧！
實作效果：
小天使
下面是我書寫的代碼，我至此都沒想過這個代碼實作如此的簡單，著實讓我大吃一驚！
代碼實作：
<!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="angel.gif" alt="">
<script>
//1.滑鼠不斷的移動，使用滑鼠移動事件：mousemove
//2.在頁面中移動，給document注冊事件
//3.圖片要移動距離，而且不占位置，我們使用絕對定位即可
//4.核心原理：每次滑鼠移動我們都會獲得最新的滑鼠坐標，把這個x和y坐標作為圖片的top和left值就可以移動圖片了
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
//mousemove 只要為我們的滑鼠移動1px就會觸發這個事件
var x = e.pageX; //獲取滑鼠移動的X坐標
var y = e.pageY; //獲取滑鼠移動的Y坐標
pic.style.left = x - 50 + 'px'; //把獲取的X坐標給圖片 注意：一定要給獲取的坐標拼接單位'px'
pic.style.top = y - 40 + 'px'; //把獲取的Y坐標給圖片
})
</script>
</body>
</html>
二、案例細節點
在這個案例中，雖然這個案例不是難度不高但是在以后確實用處還是很大的，比如購物網站中查看商品詳情的時候，查看圖片的時候隨著滑鼠走的那個放大圖片的方塊也是使用的這個原理， 下面說說這個小案例需要注意兩個小細節，
- 給引數添加單位
- 如何把滑鼠放在圖片中心
這是兩個很小的細節問題，但是你不注意就會讓你的效果無法實作，
問題一：
在我們給使用變數x，y獲取我們滑鼠的坐標的時候，計算機給我們回傳的是一個具體的數字并不會自己 給我們加上單位，所以我們在給圖片賦值x，y坐標的時候我們是(pic.style.left = x + 'px';)這樣書寫的，就是為了給我們獲取過來的坐標加上單位，讓我們的圖片知道該移動多少的距離，
問題二：
大家在看代碼的時候看到我在給圖片賦值的時候x坐標和y坐標都有減去一定的數值，其實減去數值 就是為了解決我說出來的第二個問題，如何把滑鼠放到圖片的正中間，其實在這里減的不是滑鼠的坐標位置，減的是圖片移動的位置，而減去的部分就是圖片的寬度和高度的一半大小，因為在不減去圖片寬度和高度一半的時候滑鼠是在圖片的左上角，當減去圖片寬度和高度的一半這樣滑鼠就在圖片的中間位置了，如果大家不相信就可以去自己試試，換一個圖片看看會不會這樣的一個效果，
小編我真沒想過這個案例會如此簡單，還讓我憧憬了好久！沒想到啊！
總結
雖然這個案例是簡單了點，但是還是滿足了一下我這么久以來的憧憬！也算是一個滿滿當當的識訓吧！看都看到這里了，點個贊再走吧！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/378223.html
標籤：其他
上一篇：和Ajax斗志斗勇的日子