我的柜子好像動(dòng)了之鼠標(biāo)跟蹤事件教程
鼠標(biāo)跟蹤事件測(cè)試
不知道你們知不知道這個(gè)梗。等一下，我的柜子好像動(dòng)了?；蛘邠Q個(gè)內(nèi)容，這個(gè)攝像頭Moses好像一直在看著我們！
代碼分析
首先整個(gè)頁面采用了grid布局，可以看到我們這里有7*7 49個(gè)小東西，這種布局怎么最快實(shí)現(xiàn)呢？最簡(jiǎn)單的方法肯定就是網(wǎng)格布局Grid了！
我們?cè)O(shè)置了一個(gè)容器，采取網(wǎng)格布局，7行7列，然后每個(gè)格子的大小和間距，格子利用給邊框加粗快捷的實(shí)現(xiàn)一種美觀的效果。當(dāng)然大家也可以自己再次利用布局，設(shè)置盒子。
/* 布局設(shè)置，定義一個(gè) 7x7 的網(wǎng)格，每個(gè)網(wǎng)格之間有 1.5 像素的間距 */
.grid {
display: grid;
grid-template-columns: repeat(7, 40px);
grid-template-rows: repeat(7, 40px);
grid-gap: 1.5rem;
}
/* 對(duì)每個(gè)方格進(jìn)行樣式設(shè)置，包括邊框、背景顏色和圓角等 */
.item {
background-color: rgb(40, 40, 40);
border-radius: 5px;
border-left: solid 10px #fff;
}
然后接著我們就要看這個(gè)看這個(gè)跟眼睛或者攝像頭的東西，其實(shí)，也很簡(jiǎn)單，我們就是采用before，after,偽類給盒子他們加上樣式。然后給他們?cè)O(shè)置好相應(yīng)的位置。
.item::after,
.item::before {
content: '';
width: 5px;
height: 5px;
display: block;
position: absolute;
border-radius: 50%;
left: 20px;
/* 設(shè)置小圓點(diǎn)顏色為紅色 */
background-color: rgb(212, 25, 50);
/* 設(shè)置小圓點(diǎn)陰影 */
box-shadow: 10px 0 10px rgb(212, 25, 50);
}
/* 調(diào)整紅色小圓點(diǎn)位置 */
.item::after {
top: 25px;
}
.item::before {
bottom: 25px;
}
盒子跟著鼠標(biāo)各自轉(zhuǎn)起來
最重要的js部分來了，接下來我們就要讓這些盒子跟著鼠標(biāo)各自轉(zhuǎn)起來。
要讓這些盒子轉(zhuǎn)起來，首先他們肯定要給一個(gè)旋轉(zhuǎn)角度，那么這個(gè)角度又怎么得到呢？
我們先看一個(gè)屬性Math.atan2。 Math.atan2 方法是 JavaScript 提供的一個(gè)計(jì)算弧度的數(shù)學(xué)函數(shù)，它可以根據(jù)兩個(gè)參數(shù)的正負(fù)情況得到正確的弧度值。它的語法如下所示：
Math.atan2(y, x)
其中 y 參數(shù)表示點(diǎn)的縱坐標(biāo)，x 參數(shù)表示點(diǎn)的橫坐標(biāo)。這個(gè)方法的返回值是從 X 軸正向起始，到指定點(diǎn)與 X 軸正方向之間的弧度值，返回值范圍是從 -π 到 π。對(duì)于點(diǎn) (x, y)，該方法的返回值為 Math.atan(y/x)。不過，在使用 Math.atan(y/x) 計(jì)算弧度時(shí)，無法處理點(diǎn)位于第二、三象限的情況，導(dǎo)致計(jì)算結(jié)果不準(zhǔn)確，這時(shí)候就需要使用Math.atan2。
下面是一些例子：
Math.atan2(1, 1) //等價(jià)于 Math.PI/4，約等于 0.7853981633974483 Math.atan2(-1, -1) //等價(jià)于 -3*Math.PI/4，約等于 -2.356194490192345 Math.atan2(0, -1) //等價(jià)于 Math.PI，約等于 3.141592653589793
我們使用 Math.atan2 方法計(jì)算鼠標(biāo)指針與小方格中心之間的弧度，然后將其轉(zhuǎn)換成角度，用于實(shí)現(xiàn)小方格的旋轉(zhuǎn)效果。
具體實(shí)現(xiàn)步驟
首先，我們使用 document.querySelector 方法獲取所有具有 .item 類的小方格。接下來在鼠標(biāo)移動(dòng)事件的回調(diào)函數(shù)中，我們獲取當(dāng)前鼠標(biāo)指針的 x 和 y 坐標(biāo)。然后，我們對(duì)所有的小方格進(jìn)行遍歷，針對(duì)每個(gè)小方格都計(jì)算它與鼠標(biāo)指針之間的距離和角度，并將計(jì)算出的角度應(yīng)用到小方格的 transform 樣式中，從而使其得到旋轉(zhuǎn)的效果。
具體來說：
- 針對(duì)每個(gè)小方格，我們首先獲取它的 x 和 y 坐標(biāo)。
- 然后，我們利用當(dāng)前鼠標(biāo)指針的位置和小方格的位置計(jì)算它們之間的距離和角度。其中，
diffX表示當(dāng)前鼠標(biāo)指針與小方格中心的 x 軸距離，diffY則表示 y 軸距離。我們使用Math.atan2方法計(jì)算出弧度，然后將其轉(zhuǎn)換為角度并保存在angle變量中。 - 最后，我們將計(jì)算得到的旋轉(zhuǎn)角度應(yīng)用到小方格的
transform樣式中，使其得到旋轉(zhuǎn)的效果。
整個(gè)過程比較簡(jiǎn)單和有趣，讓我們一起動(dòng)手試試吧！
/* 添加鼠標(biāo)移動(dòng)事件監(jiān)聽器 */
document.addEventListener('mousemove', function (e) {
/* 獲取所有的小方格 */
const item = document.querySelectorAll(".item")
/* 獲取當(dāng)前鼠標(biāo)指針的 x、y 坐標(biāo) */
const mouseX = e.clientX
const mouseY = e.clientY
/* 對(duì)所有小方格應(yīng)用旋轉(zhuǎn)變換（根據(jù)鼠標(biāo)指針的位置和小方格的位置計(jì)算旋轉(zhuǎn)角度） */
item.forEach(function (sqr) {
/* 獲取當(dāng)前小方格 x、y 坐標(biāo) */
const sqrX = sqr.offsetLeft
const sqrY = sqr.offsetTop
/* 計(jì)算當(dāng)前鼠標(biāo)指針與小方格中心之間的距離和角度 */
const diffX = mouseX - sqrX
const diffY = mouseY - sqrY
const radians = Math.atan2(diffY, diffX)
const angle = radians * 180 / Math.PI
/* 對(duì)小方格應(yīng)用旋轉(zhuǎn)變換 */
sqr.style.transform = `rotate(${angle}deg)`
})
})
源碼
<!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>鼠標(biāo)跟蹤</title>
<style>
/* 重置所有的 CSS 樣式 */
* {
margin: 0;
padding: 0;
}
/* 設(shè)置 body 元素為 Flexbox 容器，顯示在頁面中央 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* 設(shè)置頁面背景顏色 */
background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.f72ebc03612025e1666bcf4cfb7794bc?rik=%2fG74O%2bGxpgNvVA&riu=http%3a%2f%2fimage.qianye88.com%2fpic%2f0d9dbd3e0ee0298de8ba8fdcd0ab1622&ehk=dJOIpVyAXOvVy0xV8e35jpxDECDI5OyMEaQwJm%2fLncM%3d&risl=&pid=ImgRaw&r=0);
background-repeat: no-repeat;
background-size: cover;
}
/* 布局設(shè)置，定義一個(gè) 7x7 的網(wǎng)格，每個(gè)網(wǎng)格之間有 1.5 像素的間距 */
.grid {
display: grid;
grid-template-columns: repeat(7, 40px);
grid-template-rows: repeat(7, 40px);
grid-gap: 1.5rem;
}
/* 對(duì)每個(gè)方格進(jìn)行樣式設(shè)置，包括邊框、背景顏色和圓角等 */
.item {
background-color: rgb(40, 40, 40);
border-radius: 5px;
border-left: solid 10px #fff;
}
/* 在每個(gè)方格的四周添加紅色小圓點(diǎn)，用于增加美觀度 */
.item::after,
.item::before {
content: '';
width: 5px;
height: 5px;
display: block;
position: absolute;
border-radius: 50%;
left: 20px;
/* 設(shè)置小圓點(diǎn)顏色為紅色 */
background-color: rgb(212, 25, 50);
/* 設(shè)置小圓點(diǎn)陰影 */
box-shadow: 10px 0 10px rgb(212, 25, 50);
}
/* 調(diào)整紅色小圓點(diǎn)位置 */
.item::after {
top: 25px;
}
.item::before {
bottom: 25px;
}
</style>
</head>
<!-- Body 部分，包含一個(gè)網(wǎng)格容器和 JavaScript 代碼 -->
<body>
<!-- 網(wǎng)格容器，包含 49 個(gè)小方格，用作鼠標(biāo)移動(dòng)跟蹤的表現(xiàn) -->
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- JavaScript 代碼，監(jiān)聽鼠標(biāo)移動(dòng)事件并實(shí)現(xiàn)動(dòng)態(tài)效果 -->
<script>
/* 添加鼠標(biāo)移動(dòng)事件監(jiān)聽器 */
document.addEventListener('mousemove', function (e) {
/* 獲取所有的小方格 */
const item = document.querySelectorAll(".item")
/* 獲取當(dāng)前鼠標(biāo)指針的 x、y 坐標(biāo) */
const mouseX = e.clientX
const mouseY = e.clientY
/* 對(duì)所有小方格應(yīng)用旋轉(zhuǎn)變換（根據(jù)鼠標(biāo)指針的位置和小方格的位置計(jì)算旋轉(zhuǎn)角度） */
item.forEach(function (sqr) {
/* 獲取當(dāng)前小方格 x、y 坐標(biāo) */
const sqrX = sqr.offsetLeft
const sqrY = sqr.offsetTop
/* 計(jì)算當(dāng)前鼠標(biāo)指針與小方格中心之間的距離和角度 */
const diffX = mouseX - sqrX
const diffY = mouseY - sqrY
const radians = Math.atan2(diffY, diffX)
const angle = radians * 180 / Math.PI
/* 對(duì)小方格應(yīng)用旋轉(zhuǎn)變換 */
sqr.style.transform = `rotate(${angle}deg)`
})
})
</script>以上就是我的柜子好像動(dòng)了之鼠標(biāo)跟蹤事件教程的詳細(xì)內(nèi)容，更多關(guān)于柜子動(dòng)了鼠標(biāo)跟蹤事件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
鼠標(biāo)跟隨效果,好多用于廣告點(diǎn)擊,提示效果2008-10-10
JavaScript拖拽效果示例網(wǎng)頁解決快速拖拽的問題
JavaScript拖拽文章的配套示例網(wǎng)頁。本例解決了快速拖拽的時(shí)候元素停止移動(dòng)的問題，需要的朋友可以參考下2012-09-09
利用鼠標(biāo)的位置進(jìn)行計(jì)算偏移代碼2008-09-09
跟隨鼠標(biāo)旋轉(zhuǎn)的文字...2006-11-11
隨鼠標(biāo)移動(dòng)的圖片或文字特效！，需要的朋友可以參考下。2011-04-04
使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效
這篇文章主要介紹了使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效,在頁面上移動(dòng)鼠標(biāo),移動(dòng)軌跡上會(huì)有星星灑落,非常的好看炫酷,想知道怎么做的朋友一起來看看吧2023-03-03
百度空間的一個(gè)好友，其主頁的特效非常漂亮，其中最拉風(fēng)的就是鼠標(biāo)根隨的文字變動(dòng)效果。懶得看亂七八糟的源文件，自己用DW編寫JS模擬了下。2009-11-11
javascript跟隨鼠標(biāo)的文字帶滾動(dòng)效果
javascript跟隨鼠標(biāo)的文字帶滾動(dòng)效果...2007-11-11
javascript動(dòng)畫之圓形運(yùn)動(dòng),環(huán)繞鼠標(biāo)運(yùn)動(dòng)作小球
javascript動(dòng)畫之圓形運(yùn)動(dòng),環(huán)繞鼠標(biāo)運(yùn)動(dòng)作小球(兼容ie,ff,chrome,……)2010-07-07
跳舞的小人鼠標(biāo)跟隨事件效果實(shí)現(xiàn)
這篇文章主要為大家介紹了跳舞的小人，鼠標(biāo)跟隨事件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05