CSS Sprite

CSS Sprite是一种网页图片应用处理方式。它允许你将多个小图标集中放在一张图片上，这样当需要请求图片时就不需要一张一张图片的请求，图片也不会一张一张地显示出来。对于当前网络的速度而言，小于200KB的单张图片的载入速度是差不多的。

         CSS Sprite将多个图标集中在一张大图上，使用CSS的background-position对于图片进行精准定位。

　　比如，对于这样一张图片：

　　HTML代码：

<ul class="star">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

　　CSS代码：

.star {
	width: 70%;
	margin: 1em auto;
	height: 3em;
}

ul.star li {
	float: left;
	width: 1.5em;
	height: 1.6em;
	margin-left: 0.5em;
	background-image: url(images/star.png);
}

li.on {
	background-position: 0 1.65em;
}

　　JS代码：

$(".star li").click(function() {
	var num = parseInt($(this).attr("num"));
	for (var i = 0;i < $(".star li").length;i++) {
		$(".star li")[i].className = "";
	}
	for (var i = 0;i < num;i++) {
		$(".star li")[i].className = "on";
	}
});

　　效果图：