CSS Sprites相信大家都比较熟悉了，早在2005年CSS Zengarden的园主Dave Shea就在AListApart发表对该技术的详细阐述，也不算是新鲜事了。之前要应用时都为了算位而烦恼，好在目前多了很多在线生成工具，减少了些繁琐的过程，我也在打算下一步把目前这个theme所用到的图片妖一下，瘦下身，这是下一步的工作，这次先分享个jquery的AutoSprites导航插件，初步了解，效果还不错。

horiz_sprites_post

相应的图片弄好之后，接着就是html结构：

<ul id="hnav">
	<li id="hnavhome"><a href="#">Home</a></li>
	<li id="hnavlocal"><a href="#">Local Industry</a></li>
	<li id="hnavhigher"><a href="#">Higher Education</a></li>
	<li id="hnavcomm"><a href="#">Our Community</a></li>
	<li id="hnavnews"><a href="#">News</a></li>
</ul>

接着需要设置下css文件：

#hnav { position: absolute; top: 0; left: 0; width: 615px; height: 72px; background: url('horiz_sprites.gif') no-repeat; }
#hnav li { position: absolute; left: 0; height: 72px; }
#hnav #hnavhome { width: 82px; left: 0px; }
#hnav #hnavlocal { width: 146px; left: 82px; }
#hnav #hnavhigher{ width: 162px; left: 228px; }
#hnav #hnavcomm { width: 143px; left: 390px; }
#hnav #hnavnews { width: 82px; left: 533px; }
#hnav li a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 72px; text-indent: -9999em; }

接着只需设置下相应的参数就行了：

$(document).ready(function(){
$('#hnav').autosprites({
offset: '72px'
});
});

其中的72px设置的是横向导航的高度，默认的是横向设置。偏移值设置，横向导航设置的offset值是其高度，纵向设置的是其宽度。还有些扩展设置：

settings = $.extend({
offset: '100%', //偏移位置
orientation: 'horizontal', //'vertical' 为纵向导航
over: { opacity: 'show' },
overSpeed: 500,
out: { opacity: 'hide' },
outSpeed: 500
}, settings);
DEMO地址 下载地址 原文地址