js循环精灵图

全栈程序员站长

发布于 2022-08-25 09:37:40

5.6K0

发布于 2022-08-25 09:37:40

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/142018.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年5月9，如有侵权请联系 cloudcommunity@tencent.com 删除

https