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. codis3.1集群搭建

    Codis31搭建 codis 3.1 安装搭建 一.基本信息 1. 服务器基本信息 ip地址 安装服务 172.16.200.71 zk1.codis-dashboard.codis-fe.codi ...

  2. Extjs 实现输入数量，实时更改总价

    // 总价 var totalNum = '0.00'; //总价初始值 var $total = new Ext.form.Label({ text: '消费金额 : ￥' + totalNum + ...

  3. cocos2d-x如何截屏并保存图片

    转自:http://blog.csdn.net/wolfking_2009/article/details/11022693 static void ScreenShoot() { CCSize si ...

  4. 利用css中的border生成三角，兼容包括IE6的主流浏览器

    1.生成四个不同颜色方向的梯形 #ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #3 ...

  5. Shadow Mapping 的原理与实践（一）

    早在上世纪七十年代末,Williams在他的“Casting Curved Shadows on Curved Surface”一文中提出了名为Shadow Map的阴影生成技术.之后,他人在此基础上 ...

  6. 小票打印机指令集封装（支持EPSON指令）

    最近写了一些关于小票打印机的程序,不难,但是记录下来,作为足迹吧. 现在市场上的小票机基本都支持EPSON指令.指令集文档 对指令集进行了自己的封装,方便以后调用: package aheiziUti ...

  7. NGUI ERROR：UnityException: Sprite is not rectangle-packed. TextureRect is invalid.解决

    在使用Ngui 3.4.9的时候,使用“Unity 2D Sprite”控件的时候,出现了UnityException: Sprite is not rectangle-packed. Texture ...

  8. centos 服务器配置(三) 之定时任务

    有些liunx系统已经自带定时任务crontab,但是有的新装系统还未安装定时任务,这个时候就需要我们手动对其进行安装. 安装crontab: yum install crontabs 说明: /sb ...

  9. tomcat7.0建立新的web服务目录

    今天参照网上的配置方法配置了下tomcat的web服务目录,结果总是显示404错误,错误原因是The requested resource is not available.搜索了半天解决方法,终于发 ...

  10. OS X 10.9 Mavericks 安装 thrift 0.9.1

    通过Homebrew安装的时候,编译会报错.查了一下资料,原来是10.9系统默认使用的libc++的库,而且移除了C++ 11标准前tr库,所以编译存在问题.且笔者使用的时候,brew安装只支持到0. ...