HTML

 <body>

     <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} -->

     <!-- 以上是Sublime Text快速拼写 -->

     <ul class="sprite">

         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>

         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>

         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>

         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>

         <li><s class="s-icon"></s><a href="">CSS Sprite</a></li>

         <div class="clear"></div>

     </ul>

 </body>

CSS

 <style>

     body { background-color: #fc0; color:#333;}

     * {margin:; padding:;}

     ul,li {list-style: none;}

     a { color:#f00; font-weight: bold; text-decoration: none;}

     .sprite {margin:0 auto; width:1000px; padding-top: 50px;}

     .sprite li {float:left; margin-left: 50px; text-align: center; cursor:pointer; }

     .sprite li s { display: block; width:132px; height:112px; background:url(all.png) no-repeat; }

     .clear { clear:both;}

 </style>

JS

 <script src="http://code.jquery.com/jquery-latest.js"></script>

     <script>

     $(function () {

         var iconH = $(".sprite").find("s").height(),

             //找出存放图片的容器的高度;

             triggerLi = $(".sprite").children("li");

             //找出每一个li,放到一个数组中;

         //console.log(iconH);

         //在控制台打印出容器的高度;

         triggerLi.each(function () {

         //遍历数组中的每一个li

             var $this = $(this),

                 //声明变量赋值当前的li;

                 $index = $this.index();

                 //声明变量保存当前li的index值;

             //console.log($index);

             //在控制台打印出每一个li的index值;

             //console.log(iconH*$index);

             //得出每一个图片对应的position值;

             $this.children("s").css("background-position","0 -"+iconH*$index+"px");

             //利用js遍历出每一个s标签的背景图片;

             $this.hover(function() {

                 //鼠标移入

                 $this.children("s").css("background-position","-132px -"+iconH*$index+"px");

             }, function() {

                 //鼠标移出

                 $this.children("s").css("background-position","0 -"+iconH*$index+"px");

             });

         })

     })

     </script>

IMG(右键保存即可,重命名all.png)

SHOW

CSS Sprite 图标的更多相关文章

  1. 关于手机端CSS Sprite图标定位的一些领悟

    今天在某个群里面闲逛,看见一个童鞋分享了一个携程的移动端的页面.地址这里我也分享下吧:http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标,用的比较多就是用字体图标来 ...

  2. css sprite 调整大张图片中小图标的大小

    直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...

  3. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  4. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  5. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  6. css字体图标的使用方法

    提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~ css sprite用背 ...

  7. css sprite实例

    css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...

  8. CSS Sprite的应用

    什么是CSS Sprite ? 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏目背景啊,图片按钮啊等都有会有规则的合并 ...

  9. background-size之CSS Sprite巧用

    前言 background-size:规定背景图片的尺寸.为CSS3属性.so...万恶的ie浏览器,此刻的内心一定是崩溃的!说实话,作为一个前端的coder,面对CSS3如此多的炫酷效果,我不能用起 ...

随机推荐

  1. Python学习入门基础教程(learning Python)--5.2 Python读文件基础

    上节简单的说明了一下Pyhon下的文件读写基本流程,从本节开始,我们做几个小例子来具体展示一下Python下的文件操作,本节主要是详细讲述Python的文件读操作. 下面举一个例子,例子的功能是读取当 ...

  2. Flex坐标

    flash和flex针对不同的目的,提供了3种不同的坐标系. 全局的就是(stage级别的) 本地坐标系(组件级别的) 内容坐标系(相对于本地坐标系说的) 这些坐标系的点是可以转换的,并且有相应的方法 ...

  3. java连接mysql批量写入数据

    1.采用公认的MYSQL最快批量提交办法 public void index() throws UnsupportedEncodingException, Exception { //1000个一提交 ...

  4. MySQL常用工具

  5. ASP.NET Web Forms的改进

    虽然ASP.NET Web Forms不是vNext计划的一部分,但它并没有被忽视.作为Visual Studio 2013 Update 2的一部分,它重新开始支持新工具.EF集成和Roslyn. ...

  6. iOS 7 Pushing the Limits Notes - create a layer like notification center's or control center's background

    Problem: How to create a layer that looks like your notification center's or control center's backgr ...

  7. Codeforces Round #340 (Div. 2) C. Watering Flowers 暴力

    C. Watering Flowers 题目连接: http://www.codeforces.com/contest/617/problem/C Descriptionww.co A flowerb ...

  8. 翻译学python---《Learn Python the hard Way》---第一章 绪论

    打算学习python,但是又不想单纯地看书或是写个小项目,干脆引入很流行的翻译学习法来学习吧-         在论坛上看到了国外的一本<Learn Python the hard Way> ...

  9. ccConfig（设置一些底层接口状态：是否支持动作叠加 设置fps更新间隔和位置 是否画边框等。。）

    #ifndef __CCCONFIG_H__ #define __CCCONFIG_H__ #include "platform/CCPlatformConfig.h" /** @ ...

  10. Swift用UIBezierPath来画圆角矩形、自定义多路径图形

    最好的特点就是可以自定义路径,设置圆角和描边都很方便,以下为代码和效果,均在playground中实现 1.首先实现一个圆角矩形,并对此路径描边,为其绘制一个轮廓. 1 2 3 4 5 6 7 8 9 ...