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. hdu 2821 Pusher （dfs）

    把这个写出来是不是就意味着把   http://www.hacker.org/push  这个游戏打爆了? ~啊哈哈哈 其实只要找到一个就可以退出了  所以效率也不算很低的  可以直接DFS呀呀呀呀 ...

  2. NAT类型与穿透 及 STUN TURN 协议

    STUN : Simple Traversal of User Datagram Protocol [UDP] Through Network Address Translators [NATs] S ...

  3. sqldependency 支持的select

    https://msdn.microsoft.com/library/ms181122.aspx   支持的 SELECT 语句 满足下列要求的 SELECT 语句支持查询通知: 必须显式说明 SEL ...

  4. hdu 5276 YJC tricks time 数学

    YJC tricks time Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...

  5. C#将html导出到word（基于wps）

    由于客户需要,我们需要实现将网页导出到word中的功能,在此过程中,尝试使用过openoffice.itext.wordapi等各种方法,都不尽如人意.openoffice导出的问题图片信息在word ...

  6. Delphi和JAVA用UTF-8编码进行Socket通信例子

    最近的项目(Delphi开发),需要经常和java语言开发的系统进行数据交互(Socket通信方式),数据编码约定采用UTF-8编码. 令我无语的是:JAVA系统那边反映说,Delphi发的数据他们收 ...

  7. dwr2反推

    package services; import org.directwebremoting.Browser; import org.directwebremoting.ScriptSessions; ...

  8. oc-15-匿名对象

    /** 匿名对象 1.访问成员变量--->只能给成员变量设置值,只能成功1次,每次都是新的对象. 2.调用方法时类似类方法: 跟类方法区别:匿名对象创建对象了,开辟空间了. */ #import ...

  9. Mysql子查询IN中使用LIMIT

    学习下Mysql子查询IN中使用LIMIT的方法. 这两天项目里出了一个问题,mysql LIMIT使用后报错. 需求是这样的,我有3张表,infor信息表,mconfig物料配置表,maaply物料 ...

  10. 基于Bootstrap的jQuery开关按钮组合

    Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...