jQuery+CSS3实现紫色导航菜单特效代码

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

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

以下是 jQuery+CSS3实现紫色导航菜单特效代码的示例演示效果:

当前平台(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和CSS3实现的漂亮紫色导航</title>
<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Lobster);
body {margin:0; padding:0; background:#ddd;}
#nav{position:relative; margin:40px; background:#eee; padding:0; font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:21px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #ccc; -webkit-box-shadow:2px 2px 3px #ccc; box-shadow:2px 2px 3px #ccc;}
#nav .clear{clear:both;}
#nav ul{padding:0 0 0 5px; margin:0; list-style:none;}
#nav li{float:left; margin:5px 10px 5px 0; background:#eee; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#nav li a{text-decoration:none; color:#9e0039; display:block; padding:10px 15px;}
-->
</style>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<!-- rounded corners for IE -->
<script src="DD_roundies_0.0.2a-min.js"></script>
<script>
DD_roundies.addRule("#nav", "5px");
DD_roundies.addRule("#nav li", "5px");
</script>
<script>
$(document).ready(function(){
	$nav_li=$("#nav li");
	$nav_li_a=$("#nav li a");
	var animSpeed=450; //fade speed
	var hoverTextColor="#fff"; //text color on mouse over
	var hoverBackgroundColor="#9e0039"; //background color on mouse over
	var textColor=$nav_li_a.css("color");
	var backgroundColor=$nav_li.css("background-color");
	//text color animation
	$nav_li_a.hover(function() {
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed);
	},function() {
		var $this=$(this);
		$this.stop().animate({ color: textColor }, animSpeed);
	});
	//background color animation
	$nav_li.hover(function() {
		var $this=$(this);
		$this.stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
	},function() {
    	var $this=$(this);
		$this.stop().animate({ backgroundColor: backgroundColor }, animSpeed);
	});
});
</script>
</head>

<body>
<div id="nav">
	<ul>
    	<li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#recent">Recent projects</a></li>
        <li><a href="#experiments">Experiments / miscellaneous</a></li>
        <li><a href="#contact">Contact me</a></li>
    </ul>
    <div class="clear"></div>
</div>
</body>
</html>

JS代码(DD_roundies_0.0.2a-min.js):

/*** DD_roundies,this adds rounded-corner CSS in standard browsers and VML sublayers in IE that accomplish a similar appearance when comparing said browsers.* Author:Drew Diller* Email:drew.diller@gmail.com* URL:http://www.dillerdesign.com/experiment/DD_roundies/* Version:0.0.2a - preview 2008.12.26* Licensed under the MIT License:http://dillerdesign.com/experiment/DD_roundies/#license** Usage:* DD_roundies.addRule('#doc .container','10px 5px');
	// selector and multiple radii* DD_roundies.addRule('.box',5,true);
	// selector,radius,and optional addition of border-radius code for standard browsers.** Just want the PNG fixing effect for IE6,and don't want to also use the DD_belatedPNG library? Don't give any additional arguments after the CSS selector.* DD_roundies.addRule('.your .example img');
	**/
eval(function(p,a,c,k,e,r){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--)r[e(c)]=k[c]||e(c);
	k=[function(e){
	return r[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
	return p}
('t K={
	16:\'K\',1L:G,1M:G,1d:G,2f:y(){
	u(D.2g!=8&&D.1N&&!D.1N[q.16]){
	q.1L=M;
	q.1M=M}
17 u(D.2g==8){
	q.1d=M}
}
,2h:D.2i,1O:[],1b:{
}
,2j:y(){
	u(q.1L||q.1M){
	D.1N.2L(q.16,\'2M:2N-2O-2P:x\')}
u(q.1d){
	D.2Q(\'<?2R 2S="\'+q.16+\'" 2T="#1P#2k" ?>\')}
}
,2l:y(){
	t a=D.1k(\'z\');
	D.2m.1w.1Q(a,D.2m.1w.1w);
	u(a.12){
	2n{
	t b=a.12;
	b.1x(q.16+\'\\\\:*\',\'{
	1l:2U(#1P#2k)}
\');
	q.12=b}
2o(2p){
}
}
17{
	q.12=a}
}
,1x:y(a,b,c){
	u(1R b==\'1S\'||b===2V){
	b=0}
u(b.2W.2q().1y(\'2X\')==-1){
	b=b.2q().2Y(/[^0-9 ]/g,\'\').1T(\' \')}
H(t i=0;
	i<4;
	i++){
	b[i]=(!b[i]&&b[i]!==0)?b[C.1e((i-2),0)]:b[i]}
u(q.12){
	u(q.12.1x){
	t d=a.1T(\',\');
	H(t i=0;
	i<d.1U;
	i++){
	q.12.1x(d[i],\'1l:2Z(K.1V.2r(q,[\'+b.1W(\',\')+\']))\')}
}
17 u(c){
	t e=b.1W(\'F \')+\'F\';
	q.12.1z(D.2s(a+\'{
	Q-1f:\'+e+\';
	-30-Q-1f:\'+e+\';
}
\'));
	q.12.1z(D.2s(a+\'{
	-1A-Q-1m-1n-1f:\'+b[0]+\'F \'+b[0]+\'F;
	-1A-Q-1m-1X-1f:\'+b[1]+\'F \'+b[1]+\'F;
	-1A-Q-1Y-1X-1f:\'+b[2]+\'F \'+b[2]+\'F;
	-1A-Q-1Y-1n-1f:\'+b[3]+\'F \'+b[3]+\'F;
}
\'))}
}
17 u(q.1d){
	q.1O.31({
	\'2t\':a,\'2u\':b}
)}
}
,2v:y(a){
	2w(32.33){
	I\'z.Q\':I\'z.34\':I\'z.1B\':q.1o(a);
	13;
	I\'z.2x\':q.1Z(a);
	13;
	I\'z.1p\':I\'z.2y\':I\'z.2z\':q.1o(a);
	13;
	I\'z.20\':a.18.z.20=(a.z.20==\'S\')?\'S\':\'35\';
	13;
	I\'z.21\':q.22(a);
	13;
	I\'z.1c\':a.18.z.1c=a.z.1c;
	13}
}
,1o:y(a){
	a.14.23=\'\';
	q.2A(a);
	q.1Z(a);
	q.1C(a);
	q.1D(a);
	q.24(a);
	q.2B(a);
	q.22(a)}
,22:y(a){
	u(a.W.21.1y(\'36\')!=-1){
	t b=a.W.21;
	b=1g(b.37(b.25(\'=\')+1,b.25(\')\')),10)/2C;
	H(t v 1h a.x){
	a.x[v].1i.38=b}
}
}
,2A:y(a){
	u(!a.W){
	1q}
17{
	t b=a.W}
a.14.1p=\'\';
	a.14.1E=\'\';
	t c=(b.1p==\'2D\');
	t d=M;
	u(b.1E!=\'S\'||a.1F){
	u(!a.1F){
	a.J=b.1E;
	a.J=a.J.39(5,a.J.25(\'")\')-5)}
17{
	a.J=a.26}
t e=q;
	u(!e.1b[a.J]){
	t f=D.1k(\'3a\');
	f.1r(\'3b\',y(){
	q.1s=q.3c;
	q.1t=q.3d;
	e.1D(a)}
);
	f.3e=e.16+\'3f\';
	f.14.23=\'1l:S;
	1j:27;
	1m:-2E;
	1n:-2E;
	Q:S;
	\';
	f.26=a.J;
	f.2F(\'1s\');
	f.2F(\'1t\');
	D.2G.1Q(f,D.2G.1w);
	e.1b[a.J]=f}
a.x.Z.1i.26=a.J;
	d=G}
a.x.Z.2H=!d;
	a.x.Z.1G=\'S\';
	a.x.1u.2H=!c;
	a.x.1u.1G=b.1p;
	a.14.1E=\'S\';
	a.14.1p=\'2D\'}
,1Z:y(a){
	a.x.1H.1G=a.W.2x}
,1C:y(a){
	t c=[\'N\',\'19\',\'1a\',\'O\'];
	a.P={
}
;
	H(t b=0;
	b<4;
	b++){
	a.P[c[b]]=1g(a.W[\'Q\'+c[b]+\'U\'],10)||0}
}
,1D:y(c){
	t e=[\'O\',\'N\',\'U\',\'V\'];
	H(t d=0;
	d<4;
	d++){
	c.E[e[d]]=c[\'3g\'+e[d]]}
t f=y(a,b){
	a.z.1n=(b?0:c.E.O)+\'F\';
	a.z.1m=(b?0:c.E.N)+\'F\';
	a.z.1s=c.E.U+\'F\';
	a.z.1t=c.E.V+\'F\'}
;
	H(t v 1h c.x){
	t g=(v==\'Z\')?1:2;
	c.x[v].3h=(c.E.U*g)+\',\'+(c.E.V*g);
	f(c.x[v],M)}
f(c.18,G);
	u(K.1d){
	c.x.1H.z.28=\'-3i\';
	u(1R c.P==\'1S\'){
	q.1C(c)}
c.x.1u.z.28=(c.P.N-1)+\'F \'+(c.P.O-1)+\'F\'}
}
,24:y(j){
	t k=y(a,w,h,r,b,c,d){
	t e=a?[\'m\',\'1I\',\'l\',\'1J\',\'l\',\'1I\',\'l\',\'1J\',\'l\']:[\'1J\',\'l\',\'1I\',\'l\',\'1J\',\'l\',\'1I\',\'l\',\'m\'];
	b*=d;
	c*=d;
	w*=d;
	h*=d;
	t R=r.2I();
	H(t i=0;
	i<4;
	i++){
	R[i]*=d;
	R[i]=C.3j(w/2,h/2,R[i])}
t f=[e[0]+C.11(0+b)+\',\'+C.11(R[0]+c),e[1]+C.11(R[0]+b)+\',\'+C.11(0+c),e[2]+C.15(w-R[1]+b)+\',\'+C.11(0+c),e[3]+C.15(w+b)+\',\'+C.11(R[1]+c),e[4]+C.15(w+b)+\',\'+C.15(h-R[2]+c),e[5]+C.15(w-R[2]+b)+\',\'+C.15(h+c),e[6]+C.11(R[3]+b)+\',\'+C.15(h+c),e[7]+C.11(0+b)+\',\'+C.15(h-R[3]+c),e[8]+C.11(0+b)+\',\'+C.11(R[0]+c)];
	u(!a){
	f.3k()}
t g=f.1W(\'\');
	1q g}
;
	u(1R j.P==\'1S\'){
	q.1C(j)}
t l=j.P;
	t m=j.2J.2I();
	t n=k(M,j.E.U,j.E.V,m,0,0,2);
	m[0]-=C.1e(l.O,l.N);
	m[1]-=C.1e(l.N,l.19);
	m[2]-=C.1e(l.19,l.1a);
	m[3]-=C.1e(l.1a,l.O);
	H(t i=0;
	i<4;
	i++){
	m[i]=C.1e(m[i],0)}
t o=k(G,j.E.U-l.O-l.19,j.E.V-l.N-l.1a,m,l.O,l.N,2);
	t p=k(M,j.E.U-l.O-l.19+1,j.E.V-l.N-l.1a+1,m,l.O,l.N,1);
	j.x.1u.29=o;
	j.x.Z.29=p;
	j.x.1H.29=n+o;
	q.2K(j)}
,2B:y(a){
	t s=a.W;
	t b=[\'N\',\'O\',\'19\',\'1a\'];
	H(t i=0;
	i<4;
	i++){
	a.14[\'1B\'+b[i]]=(1g(s[\'1B\'+b[i]],10)||0)+(1g(s[\'Q\'+b[i]+\'U\'],10)||0)+\'F\'}
a.14.Q=\'S\'}
,2K:y(e){
	t f=K;
	u(!e.J||!f.1b[e.J]){
	1q}
t g=e.W;
	t h={
	\'X\':0,\'Y\':0}
;
	t i=y(a,b){
	t c=M;
	2w(b){
	I\'1n\':I\'1m\':h[a]=0;
	13;
	I\'3l\':h[a]=0.5;
	13;
	I\'1X\':I\'1Y\':h[a]=1;
	13;
	1P:u(b.1y(\'%\')!=-1){
	h[a]=1g(b,10)*0.3m}
17{
	c=G}
}
t d=(a==\'X\');
	h[a]=C.15(c?((e.E[d?\'U\':\'V\']-(e.P[d?\'O\':\'N\']+e.P[d?\'19\':\'1a\']))*h[a])-(f.1b[e.J][d?\'1s\':\'1t\']*h[a]):1g(b,10));
	h[a]+=1}
;
	H(t b 1h h){
	i(b,g[\'2y\'+b])}
e.x.Z.1i.1j=(h.X/(e.E.U-e.P.O-e.P.19+1))+\',\'+(h.Y/(e.E.V-e.P.N-e.P.1a+1));
	t j=g.2z;
	t c={
	\'T\':1,\'R\':e.E.U+1,\'B\':e.E.V+1,\'L\':1}
;
	t k={
	\'X\':{
	\'2a\':\'L\',\'2b\':\'R\',\'d\':\'U\'}
,\'Y\':{
	\'2a\':\'T\',\'2b\':\'B\',\'d\':\'V\'}
}
;
	u(j!=\'2c\'){
	c={
	\'T\':(h.Y),\'R\':(h.X+f.1b[e.J].1s),\'B\':(h.Y+f.1b[e.J].1t),\'L\':(h.X)}
;
	u(j.1y(\'2c-\')!=-1){
	t v=j.1T(\'2c-\')[1].3n();
	c[k[v].2a]=1;
	c[k[v].2b]=e.E[k[v].d]+1}
u(c.B>e.E.V){
	c.B=e.E.V+1}
}
e.x.Z.z.3o=\'3p(\'+c.T+\'F \'+c.R+\'F \'+c.B+\'F \'+c.L+\'F)\'}
,1v:y(a){
	t b=q;
	2d(y(){
	b.1o(a)}
,1)}
,2e:y(a){
	q.1D(a);
	q.24(a)}
,1V:y(b){
	q.z.1l=\'S\';
	u(!q.W){
	1q}
17{
	t c=q.W}
t d={
	3q:G,3r:G,3s:G,3t:G,3u:G,3v:G,3w:G}
;
	u(d[q.1K]===G){
	1q}
t e=q;
	t f=K;
	q.2J=b;
	q.E={
}
;
	t g={
	3x:\'2e\',3y:\'2e\'}
;
	u(q.1K==\'A\'){
	t i={
	3z:\'1v\',3A:\'1v\',3B:\'1v\',3C:\'1v\'}
;
	H(t a 1h i){
	g[a]=i[a]}
}
H(t h 1h g){
	q.1r(\'3D\'+h,y(){
	f[g[h]](e)}
)}
q.1r(\'3E\',y(){
	f.2v(e)}
);
	t j=y(a){
	a.z.3F=1;
	u(a.W.1j==\'3G\'){
	a.z.1j=\'3H\'}
}
;
	j(q.3I);
	j(q);
	q.18=D.1k(\'3J\');
	q.18.14.23=\'1l:S;
	1j:27;
	28:0;
	1B:0;
	Q:0;
	3K:S;
	\';
	q.18.z.1c=c.1c;
	q.x={
	\'1u\':M,\'Z\':M,\'1H\':M}
;
	H(t v 1h q.x){
	q.x[v]=D.1k(f.16+\':3L\');
	q.x[v].1i=D.1k(f.16+\':3M\');
	q.x[v].1z(q.x[v].1i);
	q.x[v].3N=G;
	q.x[v].z.1j=\'27\';
	q.x[v].z.1c=c.1c;
	q.x[v].3O=\'1,1\';
	q.18.1z(q.x[v])}
q.x.Z.1G=\'S\';
	q.x.Z.1i.3P=\'3Q\';
	q.3R.1Q(q.18,q);
	q.1F=G;
	u(q.1K==\'3S\'){
	q.1F=M;
	q.z.3T=\'3U\'}
2d(y(){
	f.1o(e)}
,1)}
}
;
	2n{
	D.3V("3W",G,M)}
2o(2p){
}
K.2f();
	K.2j();
	K.2l();
	u(K.1d&&D.1r&&K.2h){
	D.1r(\'3X\',y(){
	u(D.3Y==\'3Z\'){
	t d=K.1O;
	t e=d.1U;
	t f=y(a,b,c){
	2d(y(){
	K.1V.2r(a,b)}
,c*2C)}
;
	H(t i=0;
	i<e;
	i++){
	t g=D.2i(d[i].2t);
	t h=g.1U;
	H(t r=0;
	r<h;
	r++){
	u(g[r].1K!=\'40\'){
	f(g[r],d[i].2u,r)}
}
}
}
}
)}
',62,249,'||||||||||||||||||||||||||this|||var|if|||vml|function|style|||Math|document|dim|px|false|for|case|vmlBg|DD_roundies||true|Top|Left|bW|border||none||Width|Height|currentStyle|||image||floor|styleSheet|break|runtimeStyle|ceil|ns|else|vmlBox|Right|Bottom|imgSize|zIndex|IE8|max|radius|parseInt|in|filler|position|createElement|behavior|top|left|applyVML|backgroundColor|return|attachEvent|width|height|color|pseudoClass|firstChild|addRule|search|appendChild|webkit|padding|vmlStrokeWeight|vmlOffsets|backgroundImage|isImg|fillcolor|stroke|qy|qx|nodeName|IE6|IE7|namespaces|selectorsToProcess|default|insertBefore|typeof|undefined|split|length|roundify|join|right|bottom|vmlStrokeColor|display|filter|vmlOpacity|cssText|vmlPath|lastIndexOf|src|absolute|margin|path|b1|b2|repeat|setTimeout|reposition|IEversion|documentMode|querySelector|querySelectorAll|createVmlNameSpace|VML|createVmlStyleSheet|documentElement|try|catch|err|toString|call|createTextNode|selector|radii|readPropertyChanges|switch|borderColor|backgroundPosition|backgroundRepeat|vmlFill|nixBorder|100|transparent|10000px|removeAttribute|body|filled|slice|DD_radii|clipImage|add|urn|schemas|microsoft|com|writeln|import|namespace|implementation|url|null|constructor|Array|replace|expression|moz|push|event|propertyName|borderWidth|block|lpha|substring|opacity|substr|img|onload|offsetWidth|offsetHeight|className|_sizeFinder|offset|coordsize|1px|min|reverse|center|01|toUpperCase|clip|rect|BODY|TABLE|TR|TD|SELECT|OPTION|TEXTAREA|resize|move|mouseleave|mouseenter|focus|blur|on|onpropertychange|zoom|static|relative|offsetParent|ignore|background|shape|fill|stroked|coordorigin|type|tile|parentNode|IMG|visibility|hidden|execCommand|BackgroundImageCache|onreadystatechange|readyState|complete|INPUT'.split('|'),0,{
}
))

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