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. Ehcache（06）——监听器

    http://haohaoxuexi.iteye.com/blog/2119353 监听器 Ehcache中监听器有两种,监听CacheManager的CacheManagerEventListene ...

  2. 深入理解JavaScript-replace

    replace方法是属于String对象的,可用于替换字符串. 简单介绍: StringObject.replace(searchValue,replaceValue) StringObject:字符 ...

  3. HttpRequest类

    一.HttpRequest的作用 HttpRequest的作用是令到Asp.net能够读取客户端发送HTTP值.比如表单.URL.Cookie传递过来的参数. 返回字符串的那些值就不说了,那些基本上都 ...

  4. hdu 5272 Dylans loves numbers 水题

    Dylans loves numbers Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem. ...

  5. unity3d脚本编程

    一 创建和使用脚本 1 概述 GameObject的行为都是被附加到其上面的组件控制,脚本本质上也是一个组件. 在unity中创建一个脚本,默认内容例如以下: using UnityEngine; u ...

  6. Android C2DM学习 - 云端推送

    一.基础知识 当我们开发需要和服务器交互的应用程序时,基本上都需要获取服务器端的数据,比如<地震及时通>就需要及时获取服务器上最新的地震信息.要获取服务器上不定时更新的信息一般来说有两种方 ...

  7. jquery validate 小demo

    方便学习: 直接上代码: ceshi.html: <!DOCTYPE html> <html> <head> <meta http-equiv="C ...

  8. 好记心不如烂笔头之jQuery学习,第一章

    jQuery对象和DOM对象的转换: 1.jquery对象是对象数组,于是乎: var $cr = $('#cr'); var cr = $cr[0]; 2.使用jquery的自带函数: var $c ...

  9. Qt动画效果的实现，QPropertyAnimation

    Qt动画架构中的主要类如下图所示: 动画框架由基类QAbstractAnimation和它的两个儿子QVariantAnimation和QAnimationGroup组成.QAbstractAnima ...

  10. The Kernel Newbie Corner: Kernel Debugging with proc "Sequence" Files--Part 2

    转载:https://www.linux.com/learn/linux-career-center/39972-kernel-debugging-with-proc-qsequenceq-files ...