精灵图背景（js）

时松

于 2020-06-25 18:21:37 发布

阅读量314

点赞数

CC 4.0 BY-SA版权

分类专栏：基础文章标签： javascript

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/106960837

基础专栏收录该内容

79 篇文章

订阅专栏

本文探讨了如何利用JavaScript来实现精灵图背景的切换和管理，包括动态改变元素的背景位置，实现平滑的动画效果，以及在响应式设计中调整精灵图的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: ;
			}
			li {
				list-style-type: none;
			}
			.box {
				width: 250px;
				margin: 100px auto;
			}
			.box li {
				float: left;
				width: 24px;
				height: 24px;
				background-color: pink;
				margin: 15px;
				background: url(../apiimg/精灵图.png);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script type="text/javascript">
			//获取所有的li
			var lis = document.querySelectorAll('li');
			for(var i = 0; i < lis.length; i++) {
				// 找到图中每个图案的位置规律（看数学能力的时候到了） 
				var index = i * 44;
				lis[i].style.backgroundPosition = '0 -'+ index +'px';
			}
		</script>
	</body>
</html>