?? 個人主頁：不叫貓先生
???♂? 作者簡介：2022年度博客之星前端領(lǐng)域TOP 2，前端領(lǐng)域優(yōu)質(zhì)作者、阿里云專家博主，專注于前端各領(lǐng)域技術(shù)，共同學(xué)習(xí)共同進(jìn)步，一起加油呀！
??優(yōu)質(zhì)專欄：vue3從入門到精通、TypeScript從入門到實踐
?? 資料領(lǐng)?。呵岸诉M(jìn)階資料以及文中源碼可以找我免費領(lǐng)取
?? 前端學(xué)習(xí)交流：博主建立了一個前端交流群，匯集了各路大神，一起交流學(xué)習(xí)，期待你的加入！(文末有我wx或者私信)。
一、項目需求
給一張長圖，長圖中有好多個圖像，圖像的動作是連續(xù)的，當(dāng)鼠標(biāo)在容器內(nèi)移動時，背景圖像會隨之切換，呈現(xiàn)出連續(xù)的動畫效果，實現(xiàn)效果類似于3D動畫，用JS怎么實現(xiàn)？以下是實現(xiàn)效果。
示例圖片如下，可拿去自己測試：
二、代碼實現(xiàn)
<body>
<div id="container"></div>
<style>
#container {
width: 462.99px;//單個圖像的寬度
height: 260.433px;//單個圖像高度
background-image: url('https://media.sketchfab.com/models/01877de881c440cb9ba52b872dac85dc/fallbacks/5ca749dcb2e74dc4be85bcf8b0599a9b/a7e56f02d1004f59bdf9aae9d6cf5e70.jpeg');
background-repeat: no-repeat;
background-size: 6944.88px 260.433px;//參數(shù)講解在最后
}
</style>
<script>
const container = document.getElementById('container');
let currentIndex = 0;
container.addEventListener('mousemove', (event) => {
const containerRect = container.getBoundingClientRect();
const mouseOffsetX = event.clientX - containerRect.left;
const imageCount = 15; // 圖像的數(shù)量
const imageWidth = 462.99; // 單個圖像的寬度
const index = Math.floor(mouseOffsetX / (containerRect.width / imageCount));
currentIndex = Math.min(Math.max(index, 0), imageCount - 1);
const positionX = currentIndex * imageWidth;
container.style.backgroundPosition = `-${positionX}px 0`;
});
</script>
</body>
-
1.先獲取
container的 -
currentIndex
用于存儲當(dāng)前背景圖像的索引值，初始值為 0。
如果鼠標(biāo)在容器的左邊緣，則索引為 0；如果鼠標(biāo)在容器的右邊緣，則索引為圖像數(shù)量減 1。Math.min(Math.max(index, 0), imageCount - 1)將計算出來的索引值限制在 0 到imageCount - 1的范圍，防止出現(xiàn)索引越界。如果計算出所以為imageCount，那么最終計算出的索引是imageCount-1 -
mousemove
mousemove 事件監(jiān)聽器，鼠標(biāo)在某元素上移動時觸發(fā)，在事件處理函數(shù)中實現(xiàn)了圖像切換的邏輯。 -
getBoundingClientRect（點擊查看MDN詳細(xì)講解）
用于獲得頁面中某個元素的左,上,右和下分別相對瀏覽器視窗的位置。提供了元素的大小及其相對于視口的位置，具體如下所示：- top: 元素上邊距離頁面上邊的距離
- left: 元素右邊距離頁面左邊的距離
- right: 元素右邊距離頁面左邊的距離
- bottom: 元素下邊距離頁面上邊的距離
- width: 元素寬度
- height: 元素高度
-
mouseOffsetX
獲取鼠標(biāo)偏移量。在事件處理函數(shù)中，首先獲取了容器元素相對于視口的位置(containerRect.left;)和鼠標(biāo)移動處到瀏覽器窗口的橫距離(clientX)來計算鼠標(biāo)偏移量。
-
imageCount
長圖中圖像的數(shù)量，示例圖片中是15個圖像 -
imageWidth
單個圖片的寬度 -
index
當(dāng)前顯示的圖像索引。containerRect.width / imageCount意思是將容器的寬度除以圖像數(shù)量，從而得到每個圖像的寬度。Math.floor(mouseOffsetX / (containerRect.width / imageCount))將鼠標(biāo)偏移量除以每個圖像的寬度，從而得到應(yīng)該顯示的圖像的索引。 -
positionX
當(dāng)前圖像應(yīng)該顯示的位置。currentIndex * imageWidth當(dāng)前圖像索引和單個圖像寬度計算得出。文章來源：http://www.zghlxwxcb.cn/news/detail-419059.html
最后通過修改容器元素的 backgroundPosition 樣式屬性實現(xiàn)了背景圖像的切換效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-419059.html
三、問題
- 為什么
background-size設(shè)置為6944.88px 260.433px?background-size屬性用于設(shè)置背景圖像的大小。將長圖分割成了 15 個等寬的部分，每個部分都代表了不同的狀態(tài)或者場景。background-size屬性被設(shè)置為6944.88px 260.433px，意味著圖像被縮放成了水平方向的6944.88px和垂直方向的260.433px。這個值的計算方法是將單個圖像的寬度（462.99px）乘以圖像的數(shù)量（15）得到的。
因此，background-size 屬性的值被設(shè)置為 6944.88px 260.433px，使得圖像在容器內(nèi)能夠按照原本的寬高比例進(jìn)行縮放，同時也確保了每個圖像都能夠完整地顯示在容器中。
到了這里，關(guān)于JavaScript實現(xiàn)背景圖像切換3D動畫效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
