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

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

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

一、項目需求

給一張長圖，長圖中有好多個圖像，圖像的動作是連續(xù)的，當鼠標在容器內(nèi)移動時，背景圖像會隨之切換，呈現(xiàn)出連續(xù)的動畫效果，實現(xiàn)效果類似于3D動畫，用JS怎么實現(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>

先獲取container

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

height: 元素高度

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

imageCount

長圖中圖像的數(shù)量，示例圖片中是15個圖像

imageWidth

單個圖片的寬度

index

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

positionX

當前圖像應該顯示的位置。 currentIndex * imageWidth當前圖像索引和單個圖像寬度計算得出。

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

三、問題

為什么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)能夠按照原本的寬高比例進行縮放，同時也確保了每個圖像都能夠完整地顯示在容器中。

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

您可能感興趣的文章: