快捷導(dǎo)航

JavaScript實(shí)現(xiàn)背景圖像切換3D動(dòng)畫(huà)效果示例詳解

更新時(shí)間：2023年09月28日 09:40:40 作者：貓先生c

這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)背景圖像切換3D動(dòng)畫(huà)效果示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

一、項(xiàng)目需求

給一張長(zhǎng)圖，長(zhǎng)圖中有好多個(gè)圖像，圖像的動(dòng)作是連續(xù)的，當(dāng)鼠標(biāo)在容器內(nèi)移動(dòng)時(shí)，背景圖像會(huì)隨之切換，呈現(xiàn)出連續(xù)的動(dòng)畫(huà)效果，實(shí)現(xiàn)效果類(lèi)似于3D動(dòng)畫(huà)，用JS怎么實(shí)現(xiàn)？

示例圖片如下，可拿去自己測(cè)試：

二、代碼實(shí)現(xiàn)

<body>
	<div id="container"></div>
	<style>
		#container {
			width: 462.99px;//單個(gè)圖像的寬度
			height: 260.433px;//單個(gè)圖像高度
			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; // 單個(gè)圖像的寬度
			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>

先獲取container

currentIndex
用于存儲(chǔ)當(dāng)前背景圖像的索引值，初始值為 0。
如果鼠標(biāo)在容器的左邊緣，則索引為 0；如果鼠標(biāo)在容器的右邊緣，則索引為圖像數(shù)量減 1。
Math.min(Math.max(index, 0), imageCount - 1)將計(jì)算出來(lái)的索引值限制在 0 到 imageCount - 1 的范圍，防止出現(xiàn)索引越界。如果計(jì)算出所以為imageCount，那么最終計(jì)算出的索引是imageCount-1
mousemove
mousemove 事件監(jiān)聽(tīng)器，鼠標(biāo)在某元素上移動(dòng)時(shí)觸發(fā)，在事件處理函數(shù)中實(shí)現(xiàn)了圖像切換的邏輯。
getBoundingClientRect（點(diǎn)擊查看MDN詳細(xì)講解）
用于獲得頁(yè)面中某個(gè)元素的左,上,右和下分別相對(duì)瀏覽器視窗的位置。提供了元素的大小及其相對(duì)于視口的位置，具體如下所示：
- top: 元素上邊距離頁(yè)面上邊的距離
- left: 元素右邊距離頁(yè)面左邊的距離
- right: 元素右邊距離頁(yè)面左邊的距離
- bottom: 元素下邊距離頁(yè)面上邊的距離
- width: 元素寬度

height: 元素高度

mouseOffsetX
獲取鼠標(biāo)偏移量。在事件處理函數(shù)中，首先獲取了容器元素相對(duì)于視口的位置( containerRect.left; )和鼠標(biāo)移動(dòng)處到瀏覽器窗口的橫距離( clientX )來(lái)計(jì)算鼠標(biāo)偏移量。

imageCount

長(zhǎng)圖中圖像的數(shù)量，示例圖片中是15個(gè)圖像

imageWidth

單個(gè)圖片的寬度

index

當(dāng)前顯示的圖像索引。containerRect.width / imageCount意思是將容器的寬度除以圖像數(shù)量，從而得到每個(gè)圖像的寬度。Math.floor(mouseOffsetX / (containerRect.width / imageCount))將鼠標(biāo)偏移量除以每個(gè)圖像的寬度，從而得到應(yīng)該顯示的圖像的索引。

positionX

當(dāng)前圖像應(yīng)該顯示的位置。 currentIndex * imageWidth當(dāng)前圖像索引和單個(gè)圖像寬度計(jì)算得出。

最后通過(guò)修改容器元素的 backgroundPosition 樣式屬性實(shí)現(xiàn)了背景圖像的切換效果。

三、問(wèn)題

為什么background-size設(shè)置為6944.88px 260.433px?

background-size屬性用于設(shè)置背景圖像的大小。將長(zhǎng)圖分割成了 15 個(gè)等寬的部分，每個(gè)部分都代表了不同的狀態(tài)或者場(chǎng)景。background-size屬性被設(shè)置為 6944.88px 260.433px，意味著圖像被縮放成了水平方向的 6944.88px 和垂直方向的 260.433px。

這個(gè)值的計(jì)算方法是將單個(gè)圖像的寬度（462.99px）乘以圖像的數(shù)量（15）得到的。

==因此，background-size 屬性的值被設(shè)置為 6944.88px 260.433px，使得圖像在容器內(nèi)能夠按照原本的寬高比例進(jìn)行縮放，同時(shí)也確保了每個(gè)圖像都能夠完整地顯示在容器中。

以上就是JavaScript實(shí)現(xiàn)背景圖像切換3D動(dòng)畫(huà)效果示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript背景圖像切換3D動(dòng)畫(huà)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: