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. 负margin使用权威指南

    自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...

  2. 【转】C++ 异常

    一.什么是异常处理 一句话:异常处理就是处理程序中的错误. 二.为什么需要异常处理,以及异常处理的基本思想 C++之父Bjarne Stroustrup在<The C++ Programming ...

  3. 10 个实用的 jQuery 表单操作代码片段

    jQuery 绝对是一个伟大的开源JavaScript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 JavaScript,在今天这篇代码片段分享文章中, ...

  4. 【JavaScript】直接拿来用！最火的前端开源项目（一）

    摘要:对于开发者而言,了解当下比较流行的开源项目很是必要.利用这些项目,有时能够让你达到事半功倍的效果.为此,本文整理GitHub上最火的前端开源项目列表,这里按分类的方式列出前九个. 对于开发者而言 ...

  5. IOS试题收集1

    IOS试题收集1 1.Objective C中有多继承吗?没有的话用什么代替? Protocol 2.Objective C中有私有方法吗?私有变量呢? OC类里面只有静态方法和实例方法这两种,@pr ...

  6. Cocos2d-X内存管理研究<一>

    http://hi.baidu.com/tzkt623/item/651ca7d7a0aff6e055347f67        半夜没事干,研究内核,作为我cocos2d-x的第一篇教程.cocos ...

  7. 数据挖掘算法-Apriori Algorithm（关联规则）

    http://www.cnblogs.com/jingwhale/p/4618351.html Apriori algorithm是关联规则里一项基本算法.是由Rakesh Agrawal和Ramak ...

  8. QQ会员AMS平台PHP7升级实践

    作者:徐汉彬链接:https://zhuanlan.zhihu.com/p/21493018来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. QQ会员活动运营平台(AMS ...

  9. Centos7安装杀毒软件ClamAV

    Clam AntiVirus(ClamAV)是免费而且开放源代码的防毒软件,软件与病毒码的更新皆由社群免费发布.目前ClamAV主要是使用在Linux.FreeBSD等Unix-like系统架设的邮件 ...

  10. DOS命令如何进入指定的下一级目录？

    如cd E:\java workspace\test\src 如何进入E盘 ,直接 E: