论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

Javascript优化处理图片导航

文章类别：Javascript | 发表日期:2010-6-24 16:53:57

传统的处理方式

       直接在图片上加上目标链接，然后按要求排版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>基于Sprite的图片导航的优化处理_yo1s.com</TITLE>
<style type="text/css">
<!--
/*general*/
ul,ol,dl,dt,dd,p,span {margin: 0;padding: 0;font: normal 12px Tahoma;}
.cls {clear: both;display: block;font: normal 0/0 Arial;}
img {border: 0;}
dl {width: 320px;margin:8px;}
dt {font:bold 14px/28px Tahoma;}
/*extral*/
.gsort {height:1%;background: #eee;}
.gsort ul {margin:3px 0 0 4px;}
.gsort li {float: left;padding:3px;list-style:none outside;}
-->
</style>
</HEAD>
<BODY>
<dl><dt>传统方法处理的效果</dt><dd class="gsort"><ul>
<li><a href="http://www.yo1s.com/list20.htm"><img alt="动作类" src="http://www.yo1s.com/img2/a1.gif" /></a></li>
<li><a href="http://www.yo1s.com/list12.htm"><img alt="体育类" src="http://www.yo1s.com/img2/a2.gif" /></a></li>
<li><a href="http://www.yo1s.com/list10.htm"><img alt="益智类" src="http://www.yo1s.com/img2/a3.gif" /></a></li>
<li><a href="http://www.yo1s.com/list13.htm"><img alt="射击类" src="http://www.yo1s.com/img2/a4.gif" /></a></li>
<li><a href="http://www.yo1s.com/list26.htm"><img alt="综合类" src="http://www.yo1s.com/img2/a5.gif" /></a></li>
<li><a href="http://www.yo1s.com/list19.htm"><img alt="搞笑类" src="http://www.yo1s.com/img2/a6.gif" /></a></li>
<li><a href="http://www.yo1s.com/list17.htm"><img alt="冒险类" src="http://www.yo1s.com/img2/a7.gif" /></a></li>
<li><a href="http://www.yo1s.com/list18.htm"><img alt="棋牌类" src="http://www.yo1s.com/img2/a8.gif" /></a></li>
<li><a href="http://www.yo1s.com/list24.htm"><img alt="策略类" src="http://www.yo1s.com/img2/a9.gif" /></a></li>
<li><a href="http://www.yo1s.com/list11.htm"><img alt="敏捷类" src="http://www.yo1s.com/img2/a10.gif" /></a></li>
<li><a href="http://www.yo1s.com/list22.htm"><img alt="装扮类" src="http://www.yo1s.com/img2/a11.gif" /></a></li>
<li><a href="http://www.yo1s.com/list26.htm"><img alt="休闲类" src="http://www.yo1s.com/img2/a12.gif" /></a></li>
<li><a href="http://www.yo1s.com/list15.htm"><img alt="儿童类" src="http://www.yo1s.com/img2/a13.gif" /></a></li>
<li><a href="http://www.yo1s.com/list16.htm"><img alt="测试类" src="http://www.yo1s.com/img2/a14.gif" /></a></li>
<li><a href="http://www.yo1s.com/list25.htm"><img alt="MTV类" src="http://www.yo1s.com/img2/a12.gif" /></a></li>
<span class="cls"></span></ul><span class="cls"></span></dd></dl>
</BODY>
</HTML>

初步改进的处理

       利用css sprite技术，将各个图片按排版方式输出到一张图片上,再用一个透明的gif图片替代原来的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>基于Sprite的图片导航的优化处理_yo1s.com</TITLE>
<style type="text/css">
<!--
/*general*/
ul,ol,dl,dt,dd,p,span {margin: 0;padding: 0;font: normal 12px Tahoma;}
.cls {clear: both;display: block;font: normal 0/0 Arial;}
img {border: 0;}
dl {width: 320px;margin:8px;}
dt {font:bold 14px/28px Tahoma;}
textarea {width:99%;height:90px;}
p {font:normal 14px/28px Tahoma;}
/*extral*/
.gsort {height:1%;background: #eee url(http://www.yo1s.com/img/gsort.gif) no-repeat center;}
.gsort ul {margin:3px 0 0 4px;}
.gsort li {float: left;padding:3px;list-style:none outside;}
.gsort li img {width:56px;height: 69px;}
-->
</style>
</HEAD>
<BODY>
<dl><dt>初步改进后的效果</dt><dd class="gsort"><ul>
<li><a href="http://www.yo1s.com/list20.htm"><img alt="动作类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list12.htm"><img alt="体育类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list10.htm"><img alt="益智类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list13.htm"><img alt="射击类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list26.htm"><img alt="综合类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list19.htm"><img alt="搞笑类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list17.htm"><img alt="冒险类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list18.htm"><img alt="棋牌类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list24.htm"><img alt="策略类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list11.htm"><img alt="敏捷类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list22.htm"><img alt="装扮类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list26.htm"><img alt="休闲类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list15.htm"><img alt="儿童类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list16.htm"><img alt="测试类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<li><a href="http://www.yo1s.com/list25.htm"><img alt="MTV类" src="http://www.yo1s.com/img/s.gif" /></a></li>
<span class="cls"></span></ul><span class="cls"></span></dd></dl>
</BODY>
</HTML>

       相对于传统的处理方式，本次修改将15个图片处理成2个图片，从性能上来讲大大减少了对web服务器的请求数，也就是说前端性能得到提升。

再次改进的处理

       保留css sprite的处理，去掉占位图片，直接输出文字链接,再用css控制显示效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>基于Sprite的图片导航的优化处理_yo1s.com</TITLE>
<style type="text/css">
<!--
/*general*/
ul,ol,dl,dt,dd,p,span {margin: 0;padding: 0;font: normal 12px Tahoma;}
.cls {clear: both;display: block;font: normal 0/0 Arial;}
img {border: 0;}
dl {width: 320px;margin:8px;}
dt {font:bold 14px/28px Tahoma;}
textarea {width:99%;height:90px;}
p {font:normal 14px/28px Tahoma;}
/*extral*/
.gsort {height:1%;background: #eee url(http://www.yo1s.com/img/gsort.gif) no-repeat center;padding:3px 0;}
.gsort ul {margin:3px 0 0 4px;}
.gsort li {float: left;padding:3px;list-style:none outside;}
.gsort li a {display:block;width:56px;height: 69px;font-size:0;text-indent:-500px;}
-->
</style>
</HEAD>
<BODY>
<dl><dt>再次处理后的效果</dt><dd class="gsort"><ul>
<li><a href="http://www.yo1s.com/list20.htm">动作类</a></li>
<li><a href="http://www.yo1s.com/list12.htm">体育类</a></li>
<li><a href="http://www.yo1s.com/list10.htm">益智类</a></li>
<li><a href="http://www.yo1s.com/list13.htm">射击类</a></li>
<li><a href="http://www.yo1s.com/list26.htm">综合类</a></li>
<li><a href="http://www.yo1s.com/list19.htm">搞笑类</a></li>
<li><a href="http://www.yo1s.com/list17.htm">冒险类</a></li>
<li><a href="http://www.yo1s.com/list18.htm">棋牌类</a></li>
<li><a href="http://www.yo1s.com/list24.htm">策略类</a></li>
<li><a href="http://www.yo1s.com/list11.htm">敏捷类</a></li>
<li><a href="http://www.yo1s.com/list22.htm">装扮类</a></li>
<li><a href="http://www.yo1s.com/list26.htm">休闲类</a></li>
<li><a href="http://www.yo1s.com/list15.htm">儿童类</a></li>
<li><a href="http://www.yo1s.com/list16.htm">测试类</a></li>
<li><a href="http://www.yo1s.com/list25.htm">MTV类</a></li>
<span class="cls"></span></ul><span class="cls"></span></dd></dl>
</BODY>
</HTML> 

       相比第一次的改进效果，第二次的处理使得html源码更具可读性，DOM节点更加清晰简洁，文字锚点的链接方式也更利于se蜘蛛的爬行与索引。

       通过以上两次改进，相信您对CSS的sprite技术有了一定的认识。概括地讲，CSS的sprite处理是指将网页中背景、图标等小图片集中到一张大图片上，再用CSS（利用background）控制其在页面上的显示，这样有效可以减少对web服务器的请求数，也可以使DOM更加清晰简洁。

       当然，对于整站应用css sprite需要更多的是耐心和细心
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058