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