跳舞的小人鼠標跟隨事件效果實現(xiàn)
鼠標跟隨事件
在這里，我本來想弄一個灰太狼抓羊的動畫效果，就是將我們的鼠標logo替換成一只羊的照片，然后后面跟隨著一只狼，設置了cursor: url('./01.gif'), auto這個屬性，但是好像沒有成功，好像是兼容問題。于是找了一張給會動的gif。
實現(xiàn)效果
整體十分簡單，主要就是js代碼。
html里我們就只是放了一張圖片
<div class="img"></div>
然后簡簡單單的給他們設置了一下大小和樣式。
* {
margin: 0;
padding: 0;
}
body {
background: rgb(240, 230, 240);
}
.img {
width: 10%;
height: 20%;
position: absolute;
background-image: url('./01.gif');
background-size: cover;
}
看一看主要的js代碼
基本屬性的定義
這里我們主要是進行一些基本屬性的定義和設置，index可以看成是時間楨或者循環(huán)次數(shù)。
let img = document.querySelector('.img')
// 定義小圖片的旋轉(zhuǎn)角度
let deg = 0
// 定義小圖片位于網(wǎng)頁左側(cè)的位置
let imgx = 0
// 定義小圖片位于網(wǎng)頁頂部的位置
let imgy = 0
// 定義小圖片x軸的位置
let imgl = 0
// 定義小圖片y軸的位置
let imgt = 0
// 定義小圖片翻轉(zhuǎn)的角度
let y = 0
// 定義一個計數(shù)器
let index = 0
根據(jù)鼠標在圖片上的位置計算圖片的旋轉(zhuǎn)角度和翻轉(zhuǎn)
首先，通過 e.x 獲取鼠標在頁面上的橫坐標，img.offsetLeft 獲取圖片左邊邊緣距頁面左邊邊緣的距離，img.clientWidth / 2 獲取圖片寬度的一半，即圖片中心點距圖片左邊邊緣的距離。將這三個值相減，得到鼠標相對于圖片中心點的橫向偏移量，即 imgx。
imgx = e.x - img.offsetLeft - img.clientWidth / 2
同樣地，通過 e.y 獲取鼠標在頁面上的縱坐標，img.offsetTop 獲取圖片上邊邊緣距頁面上邊邊緣的距離，img.clientHeight / 2 獲取圖片高度的一半，即圖片中心點距圖片上邊邊緣的距離。將這三個值相減，得到鼠標相對于圖片中心點的縱向偏移量，即 imgy。
imgy = e.y - img.offsetTop - img.clientHeight / 2
接下來，根據(jù) imgx 和 imgy 的值，使用 Math.atan2 計算出以圖片中心為原點的弧度值，并將弧度值轉(zhuǎn)換為角度值，即 deg，這就是圖片需要旋轉(zhuǎn)的角度。 最后，將 deg 賦值給 rotate 屬性，就可以實現(xiàn)對圖片的旋轉(zhuǎn)了。
deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)
然后，通過 index = 0 定義了一個初始值為 0 的變量 index，用于后續(xù)的操作。接下來，通過 let x = event.clientX 獲取到當前鼠標的水平坐標位置。
// 每當鼠標移動的時候重置index
index = 0
// 定義當前鼠標的位置
let x = event.clientX
然后，使用 if 判斷圖片的左邊界是否小于當前鼠標的位置，也就是判斷鼠標是否在圖片的右側(cè)。如果鼠標在圖片的右側(cè)，說明圖片需要向左翻轉(zhuǎn)，這時候?qū)?y 賦值為 -180，用于后續(xù)的樣式設置。如果鼠標在圖片的左側(cè)，說明圖片無需翻轉(zhuǎn)，此時將 y 賦值為 0。最終，將 y 值賦給圖片的 rotateY 樣式屬性，就可以實現(xiàn)對圖片的翻轉(zhuǎn)效果了。當 y 為 -180 時，圖片將被翻轉(zhuǎn)過來；當 y 為 0 時，圖片不會被翻轉(zhuǎn)。
// 當鼠標的x軸大于圖片的時候，就要對著鼠標，所以需要將圖片翻轉(zhuǎn)過來
// 否則就不用翻轉(zhuǎn)
if (img.offsetLeft < x) {
y = -180
} else {
y = 0
}
window.addEventListener('mousemove', function (e) {
// 獲取網(wǎng)頁左側(cè)距離的圖片位置
imgx = e.x - img.offsetLeft - img.clientWidth / 2
// 多去網(wǎng)頁頂部距離圖片的位置
imgy = e.y - img.offsetTop - img.clientHeight / 2
// 套入公式，定義圖片的旋轉(zhuǎn)角度
deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)
// 每當鼠標移動的時候重置index
index = 0
// 定義當前鼠標的位置
let x = event.clientX
// 當鼠標的x軸大于圖片的時候，就要對著鼠標，所以需要將圖片翻轉(zhuǎn)過來
// 否則就不用翻轉(zhuǎn)
if (img.offsetLeft < x) {
y = -180
} else {
y = 0
}
})
實現(xiàn)圖片跟隨
這段代碼的作用是通過 JavaScript 實現(xiàn)對圖片的旋轉(zhuǎn)和移動。然后利用了setInterval一直重復
首先，使用 img.style.transform 將旋轉(zhuǎn)角度 deg 和翻轉(zhuǎn)角度 y 應用于元素的 transform 樣式。rotateZ 用于實現(xiàn)元素繞 z 軸旋轉(zhuǎn)，而 rotateY 則用于實現(xiàn)元素的翻轉(zhuǎn)效果。注意，這里使用字符串拼接的方式將旋轉(zhuǎn)角度和翻轉(zhuǎn)角度拼接起來，以達到應用兩個屬性值的效果。
img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"
接下來，將 index 的值加一，即 index++，表明下一幀需要進行的操作。
index++
然后，使用條件語句 if (index < 50) 對小圖片的位置進行調(diào)整。在這里，通過不停地調(diào)整小圖片的位置，實現(xiàn)了小圖片沿著鼠標運動的效果。其中，imgl += imgx / 50 用于計算小圖片應移動的水平距離，而 imgt += imgy / 50 則用于計算小圖片應移動的垂直距離。50 是移動的幀數(shù)，可以根據(jù)需求進行調(diào)整。
// 在這里設置小圖片的位置和速度，并判斷小圖片到達鼠標位置時停止移動
if (index < 100)
{
imgl += imgx / 100
imgt += imgy / 100
}
img.style.left = imgl + "px"
img.style.top = imgt + "px"
setInterval(() => {
// 設置小圖片的旋轉(zhuǎn)和翻轉(zhuǎn)
img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"
index++
// 在這里設置小圖片的位置和速度，并判斷小圖片到達鼠標位置時停止移動
if (index < 100) {
imgl += imgx / 100
imgt += imgy / 100
}
img.style.left = imgl + "px"
img.style.top = imgt + "px"
}, 10)源碼
<!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>鼠標跟隨</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: rgb(240, 230, 240);
}
.img {
width: 10%;
height: 20%;
position: absolute;
background-image: url('./01.gif');
background-size: cover;
}
</style>
</head>
<body>
<div class="img"></div>
</body>
<script>
let img = document.querySelector('.img')
// 定義小圖片的旋轉(zhuǎn)角度
let deg = 0
// 定義小圖片位于網(wǎng)頁左側(cè)的位置
let imgx = 0
// 定義小圖片位于網(wǎng)頁頂部的位置
let imgy = 0
// 定義小圖片x軸的位置
let imgl = 0
// 定義小圖片y軸的位置
let imgt = 0
// 定義小圖片翻轉(zhuǎn)的角度
let y = 0
// 定義一個計數(shù)器
let index = 0
window.addEventListener('mousemove', function (e) {
// 獲取網(wǎng)頁左側(cè)距離的圖片位置
imgx = e.x - img.offsetLeft - img.clientWidth / 2
// 多去網(wǎng)頁頂部距離圖片的位置
imgy = e.y - img.offsetTop - img.clientHeight / 2
// 套入公式，定義圖片的旋轉(zhuǎn)角度
deg = 360 * Math.atan(imgy / imgx) / (2 * Math.PI)
// 每當鼠標移動的時候重置index
index = 0
// 定義當前鼠標的位置
let x = event.clientX
// 當鼠標的x軸大于圖片的時候，就要對著鼠標，所以需要將圖片翻轉(zhuǎn)過來
// 否則就不用翻轉(zhuǎn)
if (img.offsetLeft < x) {
y = -180
} else {
y = 0
}
})
setInterval(() => {
// 設置小圖片的旋轉(zhuǎn)和翻轉(zhuǎn)
img.style.transform = "rotateZ(" + deg + "deg) rotateY(" + y + "deg)"
index++
// 在這里設置小圖片的位置和速度，并判斷小圖片到達鼠標位置時停止移動
if (index < 100) {
imgl += imgx / 100
imgt += imgy / 100
}
img.style.left = imgl + "px"
img.style.top = imgt + "px"
}, 10)
</script>
</html>以上就是跳舞的小人，鼠標跟隨事件的詳細內(nèi)容，更多關于跳舞的小人，鼠標跟隨事件的資料請關注腳本之家其它相關文章！
相關文章
javascript動畫之圓形運動,環(huán)繞鼠標運動作小球
javascript動畫之圓形運動,環(huán)繞鼠標運動作小球(兼容ie,ff,chrome,……)2010-07-07
隨鼠標移動的圖片或文字特效！，需要的朋友可以參考下。2011-04-04
javascript跟隨鼠標的文字帶滾動效果...2007-11-11
這篇文章主要為大家介紹了我的柜子好像動了之鼠標跟蹤事件教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了使用JS實現(xiàn)一個跟隨鼠標移動灑落的星星特效,在頁面上移動鼠標,移動軌跡上會有星星灑落,非常的好看炫酷,想知道怎么做的朋友一起來看看吧2023-03-03
利用鼠標的位置進行計算偏移代碼2008-09-09
跟隨鼠標旋轉(zhuǎn)的文字...2006-11-11
百度空間的一個好友，其主頁的特效非常漂亮，其中最拉風的就是鼠標根隨的文字變動效果。懶得看亂七八糟的源文件，自己用DW編寫JS模擬了下。2009-11-11
JavaScript拖拽效果示例網(wǎng)頁解決快速拖拽的問題
JavaScript拖拽文章的配套示例網(wǎng)頁。本例解決了快速拖拽的時候元素停止移動的問題，需要的朋友可以參考下2012-09-09
這篇文章主要為大家介紹了跳舞的小人，鼠標跟隨事件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05