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" />
<title>jQuery紫色不规则导航特效</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="js/public.js"></script>
<!--[if IE 6]>
<script src="js/ie6PNG.js" type="text/javascript"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script>
<![endif]-->
</head>
<body>
<div class="kePublic">
<!--效果html开始-->
<div class="nav">
 <ul>
  <li class="nav_cut"><a class="nav_a" href="#" target="_blank">&nbsp;&nbsp;&nbsp;首  页</a></li>
  <li><a class="nav_a" href="#" target="_blank">经典案例</a></li>
  <li><a class="nav_a" href="#" target="_blank">精品套系</a></li>
  <li><a class="nav_a" href="#" target="_blank">活动专区</a></li>
  <li><a class="nav_a" href="#" target="_blank">关于我们</a></li>
  <li><a class="nav_a" href="#" target="_blank">婚礼知识</a></li>
  <li><a class="nav_a" href="#" target="_blank">联系我们</a></li>
 </ul>
<a class="logo" href="#" target="_blank"><img alt="" src="images/logo.png" width="166" height="138" /></a>
</div>
<!--效果html结束-->
</div>
</body>
</html>

JS代码(public.js):

jQuery(function(){
	var flag=0for(i=0;
	i<$(".nav li").size();
	i++){
	if($(".nav li").eq(i).attr("class")=="nav_cut"){
	flag=i;
}
}
$(".nav").addClass("nav"+flag);
	//导航效果$(".nav li:not('.nav_cut')").hover(function(){
	$(".nav").removeClass("nav0 nav1 nav2 nav3 nav4 nav5 nav6");
	$(".nav").addClass("nav"+$(this).index());
	$(this).addClass("nav_hover");
	$(".nav_cut .nav_a").css("color","#ffffff");
}
,function(){
	$(".nav").removeClass("nav0 nav1 nav2 nav3 nav4 nav5 nav6");
	$(this).removeClass("nav_hover");
	$(".nav").addClass("nav"+flag);
	$(".nav_cut .nav_a").css("color","#2d2d2d");
}
);
}
)

CSS代码(style.css):

/*科e互联特效基本框架CSS*/
body,ul,dl,dd,dt,ol,li,p,h1,h2,h3,h4,h5,h6,textarea,form,select,fieldset,table,td,div,input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div{text-align:left}
a img{border:0}
body{color:#333;text-align:center;font:12px "宋体";}
ul,ol,li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.button{display:inline-block;zoom:1;*display:inline;vertical-align:baseline;margin:0 2px;outline:none;cursor:pointer;text-align:center;text-decoration:none;font:14px/100% Arial,Helvetica,sans-serif;padding:0.25em 0.6em 0.3em;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2);}
.red{color:#faddde;border:solid 1px #980c10;background:#d81b21;background:-webkit-gradient(linear,left top,left bottom,from(#ed1c24),to(#A51715));background:-moz-linear-gradient(top,#ed1c24,#A51715);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317');}
.red:hover{background:#b61318;background:-webkit-gradient(linear,left top,left bottom,from(#c9151b),to(#a11115));background:-moz-linear-gradient(top,#c9151b,#a11115);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115');color:#fff;}
.red:active{color:#de898c;background:-webkit-gradient(linear,left top,left bottom,from(#aa1317),to(#ed1c24));background:-moz-linear-gradient(top,#aa1317,#ed1c24);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px;line-height:100px;font-size:30px;font-family:'微软雅黑';color:#FFF;text-align:center;background:url(../images/bodyBg3.jpg) repeat-x bottom left;font-weight:normal}
.kePublic{padding:150px 50px 50px;height:200px;background:#000;}
.keBottom{color:#FFF;padding-top:25px;line-height:28px;text-align:center;font-family:'微软雅黑';background:url(../images/bodyBg2.jpg) repeat-x top left;padding-bottom:25px}
.keTxtP{font-size:16px;color:#ffffff;}
.keUrl{color:#FFF;font-size:30px;}
.keUrl:hover{text-decoration:underline;color:#FFF;}
/*科e互联特效基本框架CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
.nav{line-height:40px;height:40px;width:765px;padding-left:234px;background:url(../images/nav1.jpg) no-repeat left -280px;position:relative;margin:0px auto;}
.nav ul li{width:107px;float:left;}
.nav_a{font:16px/40px "微软雅黑";color:#FFF;display:block;}
.nav_cut .nav_a,.nav_hover .nav_a{color:#2d2d2d;}
.nav_a:hover{color:#2d2d2d;text-decoration:none}
.nav0{background:url(../images/nav1.jpg) no-repeat left top;}
.nav1{background:url(../images/nav1.jpg) no-repeat left -40px;}
.nav2{background:url(../images/nav1.jpg) no-repeat left -80px;}
.nav3{background:url(../images/nav1.jpg) no-repeat left -120px;}
.nav4{background:url(../images/nav1.jpg) no-repeat left -160px;}
.nav5{background:url(../images/nav1.jpg) no-repeat left -200px;}
.nav6{background:url(../images/nav1.jpg) no-repeat left -240px;}
.logo{position:absolute;left:23px;top:-45px;}
/* 效果CSS结束 */

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