js循环精灵图

最新推荐文章于 2024-08-21 12:30:00 发布

家里有蜘蛛

最新推荐文章于 2024-08-21 12:30:00 发布

阅读量4.2k

点赞数 8

分类专栏： # 原生js

本文链接：https://blog.csdn.net/qq_44983621/article/details/100030871

版权

原生js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

js循环精灵图

循环精灵图可以不用在给每一个小块一一的修改位置。
主要原理是找到整张的背景图与li的下标的数学关系
左侧是一大张背景图右侧是成品是预览图

在这里插入图片描述

这个背景图的位置其实是有规律的，每两张之间间隔一个固定长度为20px，小图标的长度为24px，我们就可以得出这个间隔44px。然后使用这个间隔移动这个大背景图的位置达到精灵图的效果。我们的每一个span中都会有一个 background-image 因此我们只需要关注大背景图的纵坐标上的移动。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				width: 216px;
			}
			li {
				width: 70px;
				height: 70px;
				list-style: none;
				float: left;
				border: 1px solid black;
				text-align: center;
			}
			span {
				background: url(./jingling.png) 0 0 no-repeat;
				display: inline-block;
				width: 24px;
				height: 24px;
				margin-top: 11px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var spans = document.getElementsByTagName('span')
				//核心代码
				for (var i = 0; i < spans.length; i++) {
					var index = i * 44;
					spans[i].style.backgroundPosition = "0 -" + index + "px";
					//这个值 是负的原因是我们的大背景图是向上移动的
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li> <span></span> </li>
			<li> <span></span> </li>
			<li> <span></span> </li>
			<li> <span></span> </li>
			<li> <span></span> </li>
			<li> <span></span> </li>
			<li> <span></span> </li>
			<li> <span></span> </li>
			<li> <span></span> </li>
		</ul>
	</body>
</html>