用JavaScript做精靈圖
精靈圖可以不用在給每一個小塊一 一的修改位置。主要原理是找到整張的背景圖與li的下標的數學關系.
這是一大張背景圖，這個背景圖的位置其實是有規律的，每兩張之間間隔一個固定長度，這個固定長度剛好等於一個小圖標的長度，我們使用的這個圖間隔44px。
CSS樣式如下圖所示
樣式代碼如下：
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: skyblue;
}
.conve{
width: 290px;
border: 1px solid #aaa;
margin: 100px auto;
overflow: hidden;
background-color: #fff;
}
.conve ul{
width: 292px;
list-style: none;
}
.conve ul li{
height: 67px;
float: left;
width: 72px;
border: 1px solid #aaa;
margin: -1px 0 0 -1px;
}
.conve ul li a{
display: block;
width: 72px;
height: 67px;
font-size: 12px;
color: #555;
text-decoration: none;
font-family: "微軟雅黑";
text-align: center;
}
.conve ul li a:hover{
color: #f40;
}
.conve ul li a i{
width: 24px;
height: 24px;
display: inline-block;
font-style: normal;
margin-top: 11px;
background: url('img/1.jpg')no-repeat 0 0;
}
.conve ul li a span{
width: 72px;
display: block;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="conve" id="con">
<ul>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
<li><a href="#"><i></i><span>吃飯</span></a></li>
</ul>
</div>
</body>
</html>
JavaScript部分如下所示：
<script type="text/javascript">
var icons=document.getElementsByTagName("i");
for (var i = 0; i < icons.length; i++) {
icons[i].style.backgroundPosition = "0 -"+ i*44 + "px";
}
</script>
其中：background-position屬性設置背景圖像的起始位置（第一個值代表橫向坐標值 ，第二個值代表豎向坐標值）