CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
 
CSS 雪碧图技术不是什么新东西,在网页应用中已经有几年了,现在的网页开发在图标图片的应用上已经趋向于使用字体图标,这是一种比CSS雪碧图技术更优雅的图标应用方式。
 
一下是两张CSS Sprite样图:
在网站中的导航最常见最明显,一些地方的零碎小图标也多使用。
CSS知识点:
    • background-image
    • backgorund-position
  • 特点:
    1. 相对于当个小图标,它节省文件体积和服务请求次数。将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片,所以合理的利用好它可以有效的提高网页的加载速度。
    2. 一般情况下,你需要保存为PNG-24的文件格式。
    3. 可以设计出丰富多彩的颜色体表。
  • 难点:
    1. 你需预先确定每个小图标的大小
    2. 注意小图标与小图标之间的距离
    3. 细心、耐心
PNG-24的图片格式:PNG-24可减少毛边。

background-position 索引值

应用实例:仿某商城分类导航
效果图如下:
首先,创建基本的HTML结构
HTML:

<ul class="sprite">
<li id="1">
<s style="background-position: 0 0;" class="s-icon"></s>
<a href="index.html?cat=1">顺丰速运1</a>
</li>
<li id="2">
<s style="background-position: 0 -40px;" class="s-icon"></s>
<a href="index.html?cat=2">顺丰速运2</a>
</li>
<li id="3">
<s style="background-position: 0 -80px;" class="s-icon"></s>
<a href="index.html?cat=3">顺丰速运3</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">顺丰速运4</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">顺丰速运5</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">顺丰速运6</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">顺丰速运7</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">顺丰速运8</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">顺丰速运9</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">顺丰速运10</a>
</li>
<li>
<s class="s-icon"></s>
<a href="">顺丰速运11</a>
</li>
</ul>

效果如下:
还没有样式,我们为他添加一些基本的样式
CSS:

ul{ list-style: none;margin: 0; padding: 0; }
.sprite{
margin: 10px auto;
width: 206px;
border: 1px solid #b51600;
}
.sprite li{
cursor: pointer;
height: 42px;
width: 206px;
background-color: #b51600;
border-bottom: 1px solid #911001;
border-top: 1px solid #c11e08;
}
.sprite li a {
color: #fff;
line-height: 42px;
font-size: 14px;
}

效果如下:
接下来我们为li下的s标签添加图和样式:
CSS:

.sprite li s{
height: 40px;
width: 24px;
display: block;
margin-left: 10px;
margin-right: 8px;
float: left;
background-image: url("../images/s-icon.png");
}
.sprite li:hover{
background-color: #fff;
border-color: #fff
}
.sprite li:hover a{
color: #b51600;
}
.sprite li:hover s{
}

效果如下:
通过前面介绍的background-position 索引值,用JS统一创建定位坐标,并添加鼠标滑动切换效果:
JavaScript:

$(function(){
var iconH = $(".sprite").find("s").height(),
triggerLi = $(".sprite").children("li");
//console.log(iconH);
triggerLi.each(function(){
var $this = $(this),
$index = $this.index();
//console.log($index)
//console.log(iconH*$index);
$this.children("s").css("background-position","0 -"+ iconH*$index +"px")
$this.hover(function(){
// 鼠标移入
$this.children("s").css("background-position","-24px -"+ iconH*$index +"px")
},function(){
// 鼠标移出
$this.children("s").css("background-position","0 -"+ iconH*$index +"px")
});
});

//当前页面属于某个功能时,点亮相应菜单项,这里通过地址参数判断,实际项目中应该从后台读取标志
var $cat = parseInt(getQueryString("cat"));
var poistions = "-24px -"+ iconH*($cat-1) +"px";
triggerLi.eq($cat-1).css({"background-color":"#FFF"}).find("a").css("color","red");
triggerLi.eq($cat-1).find("s").css({"background-position":poistions});
});
// 获取URL参数
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

这样我们就做好了这个导航效果,因为春静态的关系,当前页面点亮对应菜单项有BUG,但基本已经全部表达出我的意思了。
 

CSS Sprite、CSS雪碧图应用实例的更多相关文章

  1. compass与css sprite(雪碧图)

    什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链 ...

  2. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  3. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  4. css sprite,css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  5. CSS Sprite雪碧图应用

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

  6. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  7. CSS Sprite 雪碧图制作

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

  8. CSS Sprite雪碧图

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

  9. 使用雪碧图Css Sprite精灵 | 加速网页响应速度

    什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...

随机推荐

  1. 洛谷P4316 绿豆蛙的归宿(期望)

    题意翻译 「Poetize3」 题目背景 随着新版百度空间的上线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 题目描述 给出一个有向无环图,起点为1终点为N,每条边都有一个长度,并且从起点出 ...

  2. C#基础-hashtable,泛型和字典集合

    hashtable 的存储方式 使用方法: 1.引入包含Hashtable的命名空间 using System.Collections; // 引入Hash所在的命名空间 2.往hash表里面添加数据 ...

  3. PHP常用的自定义函数

    PHP常用的自定义函数 目录 php常用自定义函数类下载 php 设置字符编码为utf-8 路径格式化(替换双斜线为单斜线) 转码 打印输出 api返回信息 字符串截取 方法一: 方法二: 数组 字符 ...

  4. C# WPF使一个窗口挡在最前面,且不处理此窗口就不能点击其他窗口

    模态框弹出就可以了.窗口用ShowDialog调用. 可以在子窗体里把WindowStartupLocation设置为CenterOwner, 让子窗体在MainWindow的中心位置显示

  5. 插入排序算法Java实现

    一. 算法描述 插入即表示将一个新的数据插入到一个有序数组中,并继续保持有序.例如有一个长度为N的无序数组,进行N-1次的插入即能完成排序:第一次,数组第1个数认为是有序的数组,将数组第二个元素插入仅 ...

  6. 笔记-docker-3 使用

    笔记-docker-3 使用 1.      镜像 image是docker最重要的概念,docker运行容器前需要本地存在对应的镜像,如果没有,会尝试从默认镜像库下载. 1.1.    镜像获取 查 ...

  7. python基础之生成器表达式形式、面向过程编程、内置函数部分

    生成器表达式形式 直接上代码 1 # yield的表达式形式 2 def foo(): 3 print('starting') 4 while True: 5 x=yield #默认返回为空,实际上为 ...

  8. 大话CNN经典模型:AlexNet

    2012年,Alex Krizhevsky.Ilya Sutskever在多伦多大学Geoff Hinton的实验室设计出了一个深层的卷积神经网络AlexNet,夺得了2012年ImageNet LS ...

  9. Storm: 集群安装和配置

    前期准备:3台服务器: 192.168.8.94  192.168.8.95 192.168.8.96 去storm官网下载响应版本的软件包:http://storm.apache.org/downl ...

  10. Javascript Step by Step - 02

    DOM 操作 DOM是面向HTML和XML文档的API,为文档提供了结构化表示.在DOM中一切都是节点Node,文档就是由许多的Node组成的.文档里的每个节点都有属性 nodeName.nodeVa ...