css 雪碧图及jquery定位代码

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

p{color:red:}

无意间发现了一个很神奇的事情，就是

鼠标悬停在图片上方会切换，起初以为图标是单独插入的。但发现居然是一张完整的图片。

一万只草泥马在心中奔腾。这是怎么实现的？

后来询问得知，这是 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>

参考