jQuery菜单插件AutoSprites特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery菜单插件AutoSprites特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
	<title>Auto Sprites</title> 
	<meta name="description" content=""> 
	<meta name="keywords" content=""> 
	<link rel="stylesheet" href="all.css" type="text/css" media="all"/> 
</head> 
<body> 
	<ul id="hnav"> 
		<li id="hnavhome"><a href="#">Home</a></li> 
		<li id="hnavlocal" class="active"><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>
	<ul id="vnav"> 
		<li id="vnavhome"><a href="#">Home</a></li> 
		<li id="vnavschedule" class="active"><a href="#">Schedule</a></li> 
		<li id="vnavmedia"><a href="#">Media</a></li> 
		<li id="vnavblog"><a href="#">Blog</a></li> 
		<li id="vnavcontact"><a href="#">Contact</a></li> 
	</ul> 
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
	<script type="text/javascript" src="autosprites.min.js"></script>
	<script src="setup.js" type="text/javascript"></script> 
</body> 
</html>

JS代码(autosprites.min.js):

/** Copyright (C) 2009 Joel Sutherland* Licenced under the MIT license* http://www.newmediacampaigns.com/page/autosprites-jquery-menu-plugin*/
(function($){
	$.fn.autosprites=function(settings){
	settings=$.extend({
	offset:'100%',orientation:'horizontal',over:{
	opacity:'show'}
,overSpeed:500,out:{
	opacity:'hide'}
,outSpeed:500,activeState:false,activeClass:'active',activeSprites:false}
,settings);
	function rempx(string){
	return Number(string.substr(0,string.length-2));
}
function addpx(number){
	return number+'px';
}
$(this).each(function(){
	var backgroundImage=$(this).css('background-image');
	$(this).css('zIndex',100).find('a').css('zIndex',99);
	var totalPositionOffset=0;
	$(this).children().each(function(){
	var positionOffset='-'+addpx(totalPositionOffset);
	var baseOffset='0px';
	if(settings.activeState&&$(this).hasClass(settings.activeClass)){
	baseOffset='-'+addpx(rempx(settings.offset));
	if(settings.activeSprites)baseOffset='-'+addpx(rempx(settings.offset)*2);
}
var position=settings.orientation=='horizontal'?positionOffset+' '+baseOffset:baseOffset+' '+positionOffset;
	var offsetPosition=settings.orientation=='horizontal'?positionOffset+' -'+settings.offset:'-'+settings.offset+' '+positionOffset;
	$(this).css({
	backgroundImage:backgroundImage,backgroundPosition:position}
);
	var width=$(this).css('width');
	var height=$(this).css('height');
	var hover=$('<div>&nbsp;
	</div>').css({
	cursor:'hand',zIndex:1,position:'absolute',top:0,left:0,width:width,height:height,backgroundImage:backgroundImage,backgroundPosition:offsetPosition}
).hide();
	$(this).prepend(hover);
	$(this).hover(function(){
	$(this).find('div').stop(false,true).animate(settings.over,settings.overSpeed);
}
,function(){
	$(this).find('div').stop(false,true).animate(settings.out,settings.outSpeed);
}
);
	totalPositionOffset+=settings.orientation=='horizontal'?rempx(width):rempx(height);
}
);
}
);
}
}
)(jQuery);

JS代码(setup.js):

$(document).ready(function(){
	$('#hnav').autosprites({
	offset:'72px',activeState:true,activeSprites:true}
);
	$('#vnav').autosprites({
	orientation:'vertical',offset:'234px'}
);
}
);

CSS代码(all.css):

/* Eric Meyer Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
/* Basic Elements */
ul li{list-style:none;}
a{}
a:link,a:visited{text-decoration:none;}
a:hover,a:active{text-decoration:none;}
/* Backgrounds */
body{font:12px/1.5 arial,verdana,sans-serif;color:#777;}
/*=================================== Horizontal Navigation ================================*/
#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;}
/*=================================== Vertical Navigation ================================*/
#vnav{position:absolute;top:100px;left:0;width:234px;height:225px;background:url('vert_sprites.gif') no-repeat;}
#vnav li{position:absolute;left:0;width:234px;height:45px;}
#vnav #hnavhome{height:45px;top:0px;}
#vnav #vnavschedule{height:45px;top:45px;}
#vnav #vnavmedia{height:45px;top:90px;}
#vnav #vnavblog{height:45px;top:135px;}
#vnav #vnavcontact{height:45px;top:180px;}
#vnav li a{display:block;position:absolute;top:0;left:0;width:234px;height:45px;text-indent:-9999em;}

附件:下载该文件资源,减少时间成本(增值服务)