精灵图的妙用
相信很多小伙伴儿，对精灵（雪碧）图并不陌生。精灵图大多为小图标的形式（经美工处理）。说来话长，这图在网页上大面积应用时是真的很烦（代码冗余度很高），那么这篇文章就用js实现精灵图的快速渲染。
- 整张图片looklook
- 页面效果（淘宝原图）
- 背景图片（此图为淘宝服务扩展模块精灵图）
- 找出其中规律
总结：每个小图标之间y轴相差44px（且为负值）
OK展示
- 效果预览：
- js处理定位（细节处含注释）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 165px;
width: 220px;
margin: 100px auto;
}
li {
list-style: none;
height: 24px;
width: 24px;
margin: 15px;
float: left;
background: url('./img/淘宝.png') no-repeat;
}
</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>
// 获取元素
var lis = document.querySelectorAll('li');
// 遍历所有的li
for (var i = 0; i < lis.length; i++) {
// 精灵图竖着排列，且间隔为44px
// 索引*44为每个小图标的y坐标
var index = i * 44;
// 给每个li加上自己的图片的位置定位
lis[i].style.backgroundPosition = '0px -' + index + 'px'
}
</script>
</body>
</html>
- 平时的css对背景进行定位（代码冗余度过高）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 165px;
width: 220px;
margin: 100px auto;
}
li {
list-style: none;
height: 24px;
width: 24px;
margin: 15px;
float: left;
background: url('./img/淘宝.png') no-repeat;
}
li:nth-child(2) {
background-position: 0 -44px;
}
li:nth-child(3) {
background-position: 0 -88px;
}
li:nth-child(4) {
background-position: 0 -132px;
}
li:nth-child(5) {
background-position: 0 -176px;
}
li:nth-child(6) {
background-position: 0 -220px;
}
li:nth-child(7) {
background-position: 0 -264px;
}
li:nth-child(8) {
background-position: 0 -308px;
}
li:nth-child(9) {
background-position: 0 -352px;
}
li:nth-child(10) {
background-position: 0 -396px;
}
li:nth-child(11) {
background-position: 0 -440px;
}
li:nth-child(12) {
background-position: 0 -484px;
}
</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>
</body>
</html>