jQuery导航菜单背景切换特效代码

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

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

以下是 jQuery导航菜单背景切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='kwicks.js'></script>
<script type='text/javascript' src='custom.js'></script>
<title>Kwicks Menu with jQuery</title>
</head>
<body>
 <ul class="kwicks" style="margin:100px auto; text-align:center;">  
     <li id="kwick1"><a href="#">Home</a></li>  
     <li id="kwick2"><a href="#">Contact</a></li>  
     <li id="kwick3"><a href="#">Downloads</a></li>  
     <li id="kwick4"><a href="#">Search</a></li>  
 </ul>
</body>
</html>

JS代码(custom.js):

 function my_kwicks(){
	$('.kwicks').kwicks({
	duration:300,max:200,spacing:0}
);
}
$(document).ready(function(){
	my_kwicks();
}
);

CSS代码(style.css):

body{font-size:0.85em;font-family:Verdana,Arial,Helvetica,sans-serif;}
.kwicks{list-style:none;position:relative;margin:0;padding:0;background-image:url(no_flicker.jpg);/*some browsers are to slow when aligning the menu items via jQuery and so the background shines through,this prevents this flickering*/
}
.kwicks li{display:block;overflow:hidden;padding:0;cursor:pointer;float:left;width:125px;height:40px;margin-right:0px;background-image:url(kwicks_sprite.jpg);background-repeat:no-repeat;}
.kwicks a{display:block;height:40px;text-indent:-9999px;outline:none;}
#kwick1{background-position:0px 0px;}
#kwick2{background-position:-200px 0px;}
#kwick3{background-position:-400px 0px;}
#kwick4{background-position:-600px 0px;}
#kwick1.active,#kwick1:hover{background-position:0 bottom;}
#kwick2.active,#kwick2:hover{background-position:-200px bottom;}
#kwick3.active,#kwick3:hover{background-position:-400px bottom;}
#kwick4.active,#kwick4:hover{background-position:-600px bottom;}
#kwick1 a{background-image:url(end.jpg);background-repeat:no-repeat;background-position:left 0px;}
#kwick1 a:hover{background-position:left -80px;}
#kwick4 a{background-image:url(end.jpg);background-repeat:no-repeat;background-position:right -40px;}
#kwick4 a:hover{background-position:right -120px;}

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