DOM操作元素之循环精灵图

最新推荐文章于 2022-02-11 11:38:06 发布

咚Domi

最新推荐文章于 2022-02-11 11:38:06 发布

阅读量324

点赞数

分类专栏：前端文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_40319421/article/details/106519189

版权

本文介绍如何利用JavaScript的for循环结合CSS精灵图，通过改变元素背景位置实现一系列图片展示。关键在于理解精灵图的排列规律，用循环计算每个元素的背景定位，并注意到在设置坐标时可能需要使用负值。

摘要由CSDN通过智能技术生成

利用for循环设置一组元素的精灵图背景。

精灵图获取路径：https://img.alicdn.com/tfs/TB1tyFSXm_I8KJjy0FoXXaFnVXa-48-1194.png

分析：

首先精灵图图片排列有规律(该图片在同一X轴上，Y轴上相邻图片之间相距44px)；
核心思路：利用for循环修改精灵图片的背景位置background-positin;
数学思路：让循环里的 i 索引号 * 44 就是每个图片的 y 坐标。

具体代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>循环精灵图</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.box {
			width: 200px;
			margin: 100px auto;
		}
		.box li { 
			float: left;
			width: 24px;
			height: 24px;
			background-color: pink;
			margin: 15px;	
			background: url(img/sprite.png) no-repeat;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li&

最低0.47元/天解锁文章

咚Domi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM操作元素之循环精灵图

利用for循环设置一组元素的精灵图背景。精灵图获取路径：https://img.alicdn.com/tfs/TB1tyFSXm_I8KJjy0FoXXaFnVXa-48-1194.png分析：首先精灵图图片排列有规律(该图片在同一X轴上，Y轴上相邻图片之间相距44px)；核心思路：利用for循环修改精灵图片的背景位置background-positin; 数学思路：让循环里的 i 索引号 * 44 就是每个图片的 y 坐标。具体代码：<!DOCTYPE html&gt..
复制链接

扫一扫