无意间发现了一个很神奇的事情，就是
鼠标悬停在图片上方会切换，起初以为图标是单独插入的。但发现居然是一张完整的图片。
一万只*在心中奔腾。这是怎么实现的？
后来询问得知，这是css精灵技术（sprite） 也叫雪碧图。
CSS知识点：
- background-image
- backgorund-position
- 特点：
- 相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。
- 一般情况下，你需要保存为PNG-24的文件格式。
- 可以设计出丰富多彩的颜色体表。
- 你需预先确定每个小图标的大小
- 注意小图标与小图标之间的距离
- 细心、耐心
于是，我百度之后。我决定玩一玩
HTML结构
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
css
<style>
ul{
position: absolute;
top: 50px;
height:31px; }
li{
list-style: none;
float:left;
width:30px;
height: 31px;
margin-right: 30px;
}
a{
width:30px;
height: 31px;
display: block;
background: url(images/social-media.png) no-repeat;
background-position: 8px 0px; }
</style>
用css来定位坐标的话，十分浪费时间，于是可以用jquery统一设置坐标（ss雪碧图的定位参数按实际需求）
<script>
$(function() {
var index;
var icorW;
$("ul>li").each(function(index) {
index = $(this).index();//获取对象的索引值
icorW = $(this).width()+2;//获取对象宽度
var _this = $(this);
$(_this).children().attr("style","background-position:"+(8-(index *icorW))+"px 0px");//先众神归位 $(_this).hover(function () {
$(_this).children().attr("style","background-position:"+(8-(index *icorW))+"px 103%"); $("span").html(index);//测试索引数值 },function(){
$(_this).children().attr("style","background-position:"+(8-(index *icorW))+"px 0px");
}) }) })
</script>
参考
月上西楼
http://blog.163.com/zhangmihuo_2007/blog/static/270110752015011391211/