您的位置:首页 - 教程 - web前端 - 正文
css 雪碧图 及jquery定位代码

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

 

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

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

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

评论: