css 雪碧图 及jquery定位代码

Posted 2020-08-01 进击的前端狗

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

 

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

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

后来询问得知，这是css精灵技术（sprite） 也叫雪碧图。

 

CSS知识点：

• background-image
• backgorund-position
• 特点：
1. 相对于当个小图标，它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。
2. 一般情况下，你需要保存为PNG-24的文件格式。
3. 可以设计出丰富多彩的颜色体表。
• 难点：
1. 你需预先确定每个小图标的大小
2. 注意小图标与小图标之间的距离
3. 细心、耐心

 

于是，我百度之后。我决定玩一玩

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/