js特效代码使用(js特效制作教程)
导航条js+css特效代码怎么用
导航条js+css特效一般都用于首页index文件，作为网站的主页栏目导航。
1、打开Dreamweaver创建新页面，输入以下代码。如图：
!DOCTYPE?html?PUBliC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?
"
html?xmlns="
head
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/
script?src="
titlecss菜单演示/title
style?type="text/css"
!--
*{margin:0;padding:0;border:0;}
body?{
?font-family:?arial,?宋体,?serif;
????????font-size:12px;
}
#nav?{
??line-height:?24px;?list-style-type:?none;?background:#666;
}
#nav?a?{
?display:?block;?width:?80px;?text-align:center;
}
#nav?a:link?{
?color:#666;?text-decoration:none;
}
#nav?a:visited?{
?color:#666;text-decoration:none;
}
#nav?a:hover?{
?color:#FFF;text-decoration:none;font-weight:bold;
}
#nav?li?{
?float:?left;?width:?80px;?background:#CCC;
}
#nav?li?a:hover{
}
#nav?li?a.on{?background:#999;}
#nav?li?ul?{
?line-height:?27px;?list-style-type:?none;text-align:left;
?left:?-999em;?width:?180px;?position:?absolute;?
}
#nav?li?ul?li{
?float:?left;?width:?180px;
?background:?#F6F6F6;?
}
#nav?li?ul?a{
?display:?block;?width:?180px;w\idth:?156px;text-align:left;padding-left:24px;
}
#nav?li?ul?a:link?{
?color:#666;?text-decoration:none;
}
#nav?li?ul?a:visited?{
?color:#666;text-decoration:none;
}
#nav?li?ul?a:hover?{
?color:#F3F3F3;text-decoration:none;font-weight:normal;
?background:#C00;
}
#nav?li:hover?ul?{
?left:?auto;
}
#nav?li.sfhover?ul?{
?left:?auto;
}
#content?{
?clear:?left;?
}
--
/style
script?type=text/javascript!--//--![CDATA[//!--
$(function(){
??$("#nav?li").hover(function(){
??$(this).children("a").toggleClass("on");?
??})
})
function?menuFix()?{
?var?sfEls?=?document.getElementById("nav").getElementsByTagName("li");
?for?(var?i=0;?isfEls.length;?i++)?{
??sfEls[i].onmouseover=function()?{
??this.className+=(this.className.length0??"?":?"")?+?"sfhover";
??}
??sfEls[i].onMouseDown=function()?{
??this.className+=(this.className.length0??"?":?"")?+?"sfhover";
??}
??sfEls[i].onMouseUp=function()?{
??this.className+=(this.className.length0??"?":?"")?+?"sfhover";
??}
??sfEls[i].onmouseout=function()?{
??this.className=this.className.replace(new?RegExp("(??|^)sfhover\\b"),?
"");
??}
?}
}
window.onload=menuFix;
//--!]]/script
/head
body
ul?id="nav"
lia?href="#"百度知道/a
?ul
?lia?href="#"百度芝麻/a/li
?lia?href="#"产品一/a/li
?lia?href="#"产品一/a/li
?lia?href="#"产品一/a/li
?lia?href="#"产品一/a/li
?lia?href="#"产品一/a/li
?/ul
/li
lia?href="#"百度行家/a
?ul
?lia?href="#"服务二/a/li
?lia?href="#"服务二/a/li
?lia?href="#"服务二/a/li
?lia?href="#"服务二/a/li
?lia?href="#"服务二/a/li
?lia?href="#"服务二/a/li
?/ul
/li
lia?href="#"百度芝麻酱/a
?ul
?lia?href="#"案例三/a/li
?lia?href="#"案例三/a/li
?/ul
/li
lia?href="#"关于百度/a
?ul
?lia?href="#"关于百度/a/li
?lia?href="#"关于百度/a/li
?lia?href="#"关于百度/a/li
?lia?href="#"关于百度1/a/li
?/ul
/li
lia?href="#"在线百度/a
?ul
?lia?href="#"演示/a/li
?lia?href="#"演示/a/li
?lia?href="#"演示/a/li
?lia?href="#"演示演示演示/a/li
?lia?href="#"演示演示演示/a/li
?lia?href="#"演示演示/a/li
?lia?href="#"演示演示演示/a/li
?lia?href="#"演示演示演示演示演示/a/li
?/ul
/li
lia?href="#"联系百度/a
?ul
?lia?href="#"联系百度/a/li
?lia?href="#"联系百度/a/li
?lia?href="#"联系百度/a/li
?lia?href="#"联系百度/a/li
?lia?href="#"联系百度/a/li
?lia?href="#"联系百度/a/li
?lia?href="#"联系百度/a/li
?/ul
/li
?/ul
/li
/ul
/body
/html
2、点击F12预览导航效果。如图：
注意事项：代码中的导航分为一级导航和二级感应导航，直接修改为所需栏目名称即可使用。
什么是JS特效
JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。
比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。
扩展资料：
能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。
JS特效代码--仿windows xp左侧菜单效果
head style type=text/css ! UNKNOWN { COLOR: # dc ; TEXT DECORATION: none} A:visited { COLOR: # dc ; TEXT DECORATION: none} A:hover { COLOR: # cc; TEXT DECORATION: none} A:active { COLOR: #ff ; TEXT DECORATION: none}
cB CDFF { FONT SIZE: px; COLOR: #b cdff} c DC { FONT SIZE: px; COLOR: # dc }
/style script language="JavaScript" !
function MFXinitMenu(){ IE = document all ? : ; NN = document layers ? : ; HIDDEN = (NN) ? hide : hidden ; VISIBLE = (NN) ? show : visible ; myLayer=new Array(); mySpeed= ; subLeft= ; closes=true; myLayer[ ]=(NN) ? document MFX : document all MFX style; myLayer[ ]=(NN) ? document MFX : document all MFX style; myLayer[ ]=(NN) ? document MFX : document all MFX style; myLayer[ ]=(NN) ? document MFX : document all MFX style; myLayer[ ]=(NN) ? document MFX : document all MFX style; myLayer[ ]=(NN) ? document MFX : document all MFX style; myLayer[ ]=(NN) ? document MFX : document all MFX style; myLayer[ ]=(NN) ? document MFX : document all MFX style; running=false; whichOpen= ; lastMain=myLayer length ; MFXmain=new Array(); for(i= ; imyLayer length; i++){ mainORsub= i % ; MFXmain[i] = mainORsub ? : ; } myTop=new Array(); myLeft=new Array(); myHeight=new Array(); myWidth=new Array(); mySlide=new Array(); for(i= ; imyLayer length; i++){ if(NNMFXmain[i]){ if(i== ){ myTop[i]=myLayer[i] top; myLeft[i]=myLayer[i] left;} else{ myLeft[i]=myLeft[i ]; myTop[i]=myTop[i ]+myHeight[i ];} myHeight[i]=myLayer[i] clip height; myWidth[i]=myLayer[i] clip width; myLayer[i] left=myLeft[i]; myLayer[i] top=myTop[i]; myLayer[i] visibility=VISIBLE;} if(NN!MFXmain[i]){ myTop[i]=myTop[i ]+myHeight[i ]; myLeft[i]=myLeft[i ]; myHeight[i]=myLayer[i] clip height; myWidth[i]=myLayer[i] clip width; mySlide[i]=myTop[i]+myHeight[i]; myLayer[i] left=myLeft[i]+subLeft; myLayer[i] top=myTop[i];} if(IEMFXmain[i]){ if(i== ){ myLeft[i]=myLayer[i] pixelLeft; myTop[i]=myLayer[i] pixelTop;} else{ myLeft[i]=myLeft[i ]; myTop[i]=myTop[i ]+myHeight[i ];} myHeight[i]=myLayer[i] pixelHeight; myWidth[i]=myLayer[i] pixelWidth; myLayer[i] left=myLeft[i]; myLayer[i] top=myTop[i]; myLayer[i] visibility=VISIBLE;} if(IE!MFXmain[i]){ myTop[i]=myTop[i ]+myHeight[i ]; myLeft[i]=myLeft[i ]; myHeight[i]=myLayer[i] pixelHeight; myWidth[i]=myLayer[i] pixelWidth; myLayer[i] pixelLeft=myLeft[i]+subLeft; myLayer[i] pixelTop=myTop[i]; mySlide[i]=myTop[i]+myHeight[i]; } } } function MFXrunMenu(myName newspeed){ ieStep= ; thereS=false; thereC=false; if(newspeed ){mySpeed=newspeed;} first=myName; if(whichOpen== !runningMFXmain[myName]!(whichOpen==myName)){ running=true; if(NN){ myLayer[myName+ ] clip height= ; myLayer[myName+ ] visibility=VISIBLE; } if(IE){ myLayer[myName+ ] clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ( ) +" "+ ("auto") +")"; myLayer[myName+ ] visibility=VISIBLE; } MFXopenMenuS(myName); MFXopenMenuC(myName); } if(whichOpen= !running!(whichOpen==myName)){ running=true; second=whichOpen; ieStep =myHeight[second+ ]; thereCS=false; thereCC=false; MFXcloseMenuS(second); MFXcloseMenuC(second); } if(whichOpen= !runningwhichOpen==myNamecloses){ running=true; second=whichOpen; ieStep =myHeight[second+ ]; thereCS=false; thereCC=false; MFXcloseMenuS(second); MFXcloseMenuC(second); ?} } function MFXstopCloseS(myName){ running=false; thereCS=true; if(closesfirst==whichOpen){whichOpen= ;} else{whichOpen= ; MFXrunMenu(first); } } function MFXstopOpenS(myName){ running=false; thereS=true; if(IE){myLayer[myName+ ] clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ("auto") +" "+ ("auto") +")";} whichOpen=myName; } function MFXopenMenuS(myName){ myStep=mySpeed; if(NN!thereS!(first==lastMain)){ if(myLayer[first+ ] top+myStepmySlide[first+ ]){ myStep=mySlide[first+ ] myLayer[first+ ] top; } for(i=first+ ; imyLayer length; i+= ){ myLayer[i] top+=myStep; } if(myLayer[first+ ] top==mySlide[first+ ]){ MFXstopOpenS(first) } if(running)setTimeout( MFXopenMenuS(first) ); } if(IE!thereS!(first==lastMain)){ if(myLayer[first+ ] pixelTop+myStepmySlide[first+ ]){ myStep=mySlide[first+ ] myLayer[first+ ] pixelTop; } for(i=first+ ; imyLayer length; i+= ){ myLayer[i] pixelTop+=myStep; } if(myLayer[first+ ] pixelTop==mySlide[first+ ]){ MFXstopOpenS(first) } if(running)setTimeout( MFXopenMenuS(first) ); } } function MFXopenMenuC(myName){ myStep=mySpeed; if(NN!thereC){ if ((myLayer[first+ ] clip height+myStep)myHeight[first+ ]){ myLayer[first+ ] clip height=myHeight[first+ ] } if(myLayer[first+ ] clip height==myHeight[first+ ]){ thereC=true; whichOpen=first; MFXstopOpenS(first)
}else{ myLayer[first+ ] clip height+=myStep;
} if(running)setTimeout( MFXopenMenuC(first) ); } if(IE!thereC){ ieStep+=myStep; myLayer[myName+ ] clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep) +" "+ ("auto") +")";
if(ieStep=myHeight[first+ ]){ thereC=true; whichOpen=first; MFXstopOpenS(first) } if(running)setTimeout( MFXopenMenuC(first) ); } } function MFXcloseMenuS(myName){ myStep=mySpeed; if(NN!thereCS!(second==lastMain)){ if(myLayer[second+ ] top myStepmyTop[second+ ]){ myStep=myLayer[second+ ] top myTop[second+ ]; } for(i=second+ ; imyLayer length; i+= ){ myLayer[i] top =myStep;
} if(myLayer[second+ ] top==myTop[second+ ]){ MFXstopCloseS(second); } if(running)setTimeout( MFXcloseMenuS(second) ); } if(IE!thereCS!(second==lastMain)){ if(myLayer[second+ ] pixelTop myStepmyTop[second+ ]){ myStep=myLayer[second+ ] pixelTop myTop[second+ ]; } for(i=second+ ; imyLayer length; i+= ){ myLayer[i] pixelTop =myStep;
} if(myLayer[second+ ] pixelTop==myTop[second+ ]){ MFXstopCloseS(second); } if(running)setTimeout( MFXcloseMenuS(second) ); } } function MFXcloseMenuC(myName){ myStep= mySpeed; ieStep =mySpeed; if(NN!thereCC){ if ((myLayer[second+ ] clip bottom+myStep) ){ myLayer[second+ ] clip bottom= ; } if(myLayer[second+ ] clip bottom== ){ thereCC=true;
if(second==lastMain)MFXstopCloseS(second); }else{ myLayer[second+ ] clip bottom+=myStep;
} if(running)setTimeout( MFXcloseMenuC(second) ); } if(IE!thereCC){ if(ieStep = ){ myLayer[myName+ ] clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ( ) +" "+ ("auto") +")"; thereCC=true; if(second==lastMain)MFXstopCloseS(second); }else{ myLayer[myName+ ] clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep ) +" "+ ("auto") +")";
} if(running)setTimeout( MFXcloseMenuC(second) ); } }
function MM_findObj(n d) { //v ?var p i x; if(!d) d=document; if((p=n indexOf("?")) parent frames length) { ?d=parent frames[n substring(p+ )] document; n=n substring( p);} ?if(!(x=d[n])d all) x=d all[n]; for (i= ;!xid forms length;i++) x=d forms[i][n]; ?for(i= ;!xd layersid layers length;i++) x=MM_findObj(n d layers[i] document); ?if(!x document getElementById) x=document getElementById(n); return x; } // /script /head
body onload="MFXinitMenu()" bgcolor="# B "
lishixinzhi/Article/program/Java/JSP/201311/20192