JavaScript实现背景图像切换3D动画效果示例详解

更新时间：2023年09月28日 09:40:40 作者：猫先生c

这篇文章主要为大家介绍了JavaScript实现背景图像切换3D动画效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一、项目需求

给一张长图，长图中有好多个图像，图像的动作是连续的，当鼠标在容器内移动时，背景图像会随之切换，呈现出连续的动画效果，实现效果类似于3D动画，用JS怎么实现？

示例图片如下，可拿去自己测试：

二、代码实现

<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;//参数讲解在最后
		}
	</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; // 图像的数量
			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；如果鼠标在容器的右边缘，则索引为图像数量减 1。
Math.min(Math.max(index, 0), imageCount - 1)将计算出来的索引值限制在 0 到 imageCount - 1 的范围，防止出现索引越界。如果计算出所以为imageCount，那么最终计算出的索引是imageCount-1
mousemove
mousemove 事件监听器，鼠标在某元素上移动时触发，在事件处理函数中实现了图像切换的逻辑。
getBoundingClientRect（点击查看MDN详细讲解）
用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。提供了元素的大小及其相对于视口的位置，具体如下所示：
- top: 元素上边距离页面上边的距离
- left: 元素右边距离页面左边的距离
- right: 元素右边距离页面左边的距离
- bottom: 元素下边距离页面上边的距离
- width: 元素宽度

height: 元素高度

mouseOffsetX
获取鼠标偏移量。在事件处理函数中，首先获取了容器元素相对于视口的位置( containerRect.left; )和鼠标移动处到浏览器窗口的横距离( clientX )来计算鼠标偏移量。

imageCount

长图中图像的数量，示例图片中是15个图像

imageWidth

单个图片的宽度

index

当前显示的图像索引。containerRect.width / imageCount意思是将容器的宽度除以图像数量，从而得到每个图像的宽度。Math.floor(mouseOffsetX / (containerRect.width / imageCount))将鼠标偏移量除以每个图像的宽度，从而得到应该显示的图像的索引。

positionX

当前图像应该显示的位置。 currentIndex * imageWidth当前图像索引和单个图像宽度计算得出。

最后通过修改容器元素的 backgroundPosition 样式属性实现了背景图像的切换效果。

三、问题

为什么background-size设置为6944.88px 260.433px?

background-size属性用于设置背景图像的大小。将长图分割成了 15 个等宽的部分，每个部分都代表了不同的状态或者场景。background-size属性被设置为 6944.88px 260.433px，意味着图像被缩放成了水平方向的 6944.88px 和垂直方向的 260.433px。

这个值的计算方法是将单个图像的宽度（462.99px）乘以图像的数量（15）得到的。

==因此，background-size 属性的值被设置为 6944.88px 260.433px，使得图像在容器内能够按照原本的宽高比例进行缩放，同时也确保了每个图像都能够完整地显示在容器中。

以上就是JavaScript实现背景图像切换3D动画效果示例详解的详细内容，更多关于JavaScript背景图像切换3D动画的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JS快速掌握ES6的class用法
这篇文章主要介绍了JS快速掌握ES6的class用法，想了解ES6的同学，一定要看一下
2021-05-05
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
这篇文章主要介绍了JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
Three.js如何实现雾化效果示例代码
雾化效果是3D的比较常见的特性，在游戏中见到的烟雾、爆炸火焰以及白云等效果都是雾化的结果，下面这篇文章主要给大家介绍了关于Three.js如何实现雾化效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-09-09
JS继承定义与使用方法简单示例
这篇文章主要介绍了JS继承定义与使用方法,结合完整实例形式分析了JavaScript继承的基本定义、用法及操作注意事项,需要的朋友可以参考下
2020-02-02
javascript常用的方法分享
本文给大家分享了几个javascript中常用的方法，十分的实用，也很简单，有需要的小伙伴可以参考下。
2015-07-07
HTML+JavaScript实现扫雷小游戏
这篇文章主要为大家详细介绍了HTML+JavaScript实现扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
JavaScript模块化之使用requireJS按需加载
RequireJS 可以帮助用户异步按需的加载 JavaScript 代码，并解决 JavaScript 模块间的依赖关系，提升了前端代码的整体质量和性能
2017-04-04
JavaScript使用类似break机制中断forEach循环的方法
这篇文章主要介绍了JavaScript使用类似break机制中断forEach循环的方法,需要的朋友可以参考下
2018-11-11
JavaScript function函数种类详解
这篇文章主要为大家详细介绍了JavaScript function函数种类，包括普通函数、匿名函数、闭包函数，感兴趣的小伙伴们可以参考一下
2016-02-02
js实现搜索栏效果
这篇文章主要为大家详细介绍了js实现搜索栏效果，以及焦点问题的解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11