【网页特效代码-页面特效】幻影般的导航条,鼠标放上去就显示导航条

合集下载

【网页特效代码-页面特效】点击文字链接后,慢慢展开一个菜单层,展开

</DIV>
<SCRIPT language=JavaScript1.2>
if (yers){
document.dropmenu03.captureEvents(Event.CLICK)
document.dropmenu03.onclick=hidemenu2
}
</SCRIPT></div></td></tr>
else
document.dropmenu03.visibility="hide"
document.dropmenu03.left=yerX
document.dropmenu03.top=yerY+19
return false
}
function hidemenu(){
selection[13]='<a href="/xml/index.asp" class=yellow> [3] XML方面</a>'
if (yers)
document.dropmenu01.document.dropmenu02.visibility='show'
function dropit2(){
selection[8]='<a href="/free/guestbook/index.asp" class=yellow> [2] 免费留言板申请</a><br>'
selection[9]='<a href="/free/vote/index.asp" class=yellow> [3] 免费网上调查申请</a><br>'

一步步教大家编写酷炫的导航栏js+css实现

⼀步步教⼤家编写酷炫的导航栏js+css实现⼀步⼀步的学习制作导航栏，⽂章末尾再做个综合页⾯，分享给⼤家⼀个炫酷的导航栏供⼤家参考，具体内容如下1.当前页⾯⾼亮显⽰的导航栏⾸先是HTML代码,很简单,ul+li实现菜单<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>导航栏⼀</title></head><body><header class="header"><div class="nva"><ul class="list"><li><a href="Android.html">Android</a></li><li><a href="C++.html">C++</a></li><li><a href="IOS.html">IOS</a></li><li><a href="Java.html">Java</a></li><li><a href="Ruby.html">Ruby</a></li></ul></div></header><h1>⾸页</h1></body></html>基本效果:接下来设置CSS属性,这⾥要注意标签a是⾏级元素,所以需要⽤display转成块级元素,这个很常⽤,还有就是line-height的常见⽤法*{ margin:0; padding: 0; }a{ text-decoration: none; }.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }.list li{ float: left; }.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }.list li a:hover{ background:#333; color:#fff; }.list li a.on{ background:#333; color:#fff; }h1{ margin: 20px auto; text-align: center; }实现的效果:最后就是JS动态添加定位效果了js⾥⾯这样考虑,页⾯跳转就会有链接,根据链接的后缀来匹配属性,匹配则更改样式即可达到想要的效果需要注意的就是如何获取URL,如何从URL⾥⾯查找出href信息$(function(){//当前链接以/分割后最后⼀个元素索引var index = window.location.href.split("/").length-1;//最后⼀个元素前四个字母,防⽌后⾯带参数var href = window.location.href.split("/")[index].substr(0,4);if(href.length>0){//如果匹配开头成功则更改样式$(".list li a[href^='"+href+"']").addClass("on");//[attribute^=value]：匹配给定的属性是以某些值开始的元素。

jquery动感漂浮导航菜单代码分享

jquery动感漂浮导航菜单代码分享这是⼀款基于jquery实现动感漂浮导航菜单的特效代码，菜单可以上下浮动，动感⼗⾜，为⾃⼰的⽹站增加了活⼒，是⼀款⾮常实⽤的导航菜单特效源码。

运⾏效果图：点击：为⼤家分享的jquery动感漂浮导航菜单代码如下<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery Floating Menu</title><script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script>$(document).ready(function () {//get the default top valuevar top_val = $('#menu li a').css('top');//animate the selected menu item$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});$('#menu li').hover(function () {//animate the menu item with 0 top value$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});},function () {//set the position to default$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});//always keep the previously selected item in fixed position$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});});});</script><style>#menu {list-style:none;padding:0;margin:0 auto;;height:70px;width:600px;}#menu li {float:left;width:109px;height:inherit;position:relative;overflow:hidden;}#menu li a {position:absolute;top:20px;text-indent:-999em;background:url(menu.png) no-repeat 0 0;display:block;width:109px;height:inherit;/* fast png fix for ie6 */position:relative;behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));}</style></head><body><br/><br/><br/><ul id="menu"><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li></ul><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery Floating Menu</title><script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script>$(document).ready(function () {//get the default top valuevar top_val = $('#menu li a').css('top');//animate the selected menu item$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});$('#menu li').hover(function () {//animate the menu item with 0 top value$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});},function () {//set the position to default$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});//always keep the previously selected item in fixed position$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});});});</script><style>#menu {list-style:none;padding:0;margin:0 auto;;height:70px;width:600px;}#menu li {float:left;width:109px;height:inherit;position:relative;overflow:hidden;}#menu li a {position:absolute;top:20px;text-indent:-999em;background:url(menu.png) no-repeat 0 0;display:block;width:109px;height:inherit;/* fast png fix for ie6 */position:relative;behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));}</style></head><body><br/><br/><br/><ul id="menu"><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li></ul>如果⼤家还想深⼊学习，可以点击、进⾏学习。

网页特效代码

典型特效加入收藏夹设为首页去掉超链接的下划线自动刷新网页刷新本页返回到上一页跳出小窗口自动关闭窗口给页面加保护固定字号大小状态栏例的动态欢迎语保护自己的页面不被别人放在框架中说明点击即可把你的网站添加到浏览器的收藏菜单下效果收藏本站代码<span style="CURSOR: hand" onClick="window.external.addFavorite('','网页特效集锦')" title="网页特效集锦">收藏本站</span>说明点击即可把你的网站设置为浏览器的起始页效果设为首页代码<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.s etHomePage('');" style="CURSOR: hand">设为首页</span>说明有时候看着那超链接的下划线挺讨厌的，把下面这段代码放到网页源代码<head>与</head>之间，下划线就无影无踪啦！注意，网页的<body>标签里不能再有link之类的属性，否则本效果会失效！效果试试就知道啦！代码 <style TYPE="text/css"></style>说明自动刷新网页在HTML的与之间加入下面这段代码，则在5分钟之后正在浏览的页面将会自动变为target.html这一页。

网站导航菜单代码高亮显示通用代码

网站导航菜单代码高亮显示通用代码点击查看DEMO1.首先将以下代码插入到你body需要设置导航的地方<div id="navmenu"><ul id="navi"><li><a href="index.htm" _fcksavedurl="index.htm">梧桐首页</a></li><li><a href="index1.htm" _fcksavedurl="index1.htm">网站优化</a></li></ul></div><script type="text/javascript" language="javascript">var nav = document.getElementById("navi");var links = nav.getElementsByTagName("li");var lilen = nav.getElementsByTagName("a"); //判断地址var currenturl = document.location.href;var last = 0;for (var i=0;i<links.length;i++){var linkurl = lilen[i].getAttribute("href");if(currenturl.indexOf(linkurl)!=-1){last = i;}}links[last].className = "navon"; //高亮代码样式</script>2.然后将以下CSS代码添加到你网站的CSS文件中#navmenu{ width:980px;}#navmenu ul{ padding:0px; margin:0px;}#navmenu ul li{ float:left; width:80px; list-style:none; text-align:center; height:30px; line-height:30px;}.navon{ background:#000000;} .navon a{ color:#ffffff;}。

常用的网页特效代码【VIP专享】

常用的网页特效代码1．文本向上循环滚动说明:文本自动向上循环滚动，鼠标放到上面还会暂时停下来。

果:代码:2．页面自动滚屏效果<body onLoad="scrollit()"><SCRIPT language="JavaScript"> </SCRIPT>3．滚动的文字说明说明鼠标放到链接上就会出现一个说明框，里面有滚动的文字说明效果把鼠标放上来试试代码4．飘动的字符跟随鼠标说明在鼠标后面跟着一串飘动的字符效果看看就知道啦！Array代码5．一群小点跟随鼠标说明跟随鼠标的一群小点，就象星星一样效果看看就知道啦！代码6．接触链接自动打开窗口说明鼠标放到链接上，就立刻弹出警告框效果试试代码7．数字时钟说明数字化的时钟效果现在时刻：12:07:54代码8．显示停留的时间说明显示他人在页面停留的时间，而且可以作出提醒效果代码9．有影子的数字时钟说明这个时钟是有影子的，而且还在不停地走着呢效果12:09:3612:09:36代码10．打字效果说明:文字在状态栏上从左往右一个一个地显示，就象你打出的字一样效果:看看状态栏！Array代码:11．文字不停闪烁说明:一段文字在状态栏上不停跳动显示，可以作为提示信息效果:看看状态栏！代码:12．图象大小自动变化说明: 把一张图片变形扭曲成各种不同的长宽，非常好玩效果:代码:13．漫天飞雪说明: 漫天飞雪效果: 看到了吗？代码:14．自由移动的图片(一)说明:自由移动的图片效果:看到了吗？代码:再把<body>改为：15．自由移动的图片(二)说明: 图片在页面内随意飘动，遇到边界还会反弹。

效果: 看到了吗？代码:16．状态栏里的动态欢迎语说明浏览器的状态栏里出现一个字接一个字往左跑的欢迎语！效果看看状态栏：）代码17．背景色变换按钮:18．去掉超链接的下划线说明有时候看着那超链接的下划线挺讨厌的，把下面这段代码放到网页源代码<head>与</head>之间，下划线就无影无踪啦！注意，网页的<body>标签里不能再有link之类的属性，否则本效果会失效！效果试试就知道啦！代码19．给页面加保护说明如果你不想让辛辛苦苦做出来的东西被人轻易地Copy&Paste走的话，不妨在HTML里加入下面这段代码。

【网页特效代码-页面特效】在页面底部出现文字链接的导航说明条,效果

}
if (ns4){
hideobj = eval("document.nsviewer")
hideobj.visibility="hidden"
}
</script>
<a href="#" onmouseover="setObj(description[0],'override',550,30)" onmouseout="clearTimeout(openTimer);stopIt()">显示说明1</a>
theobj.document.close()
}
viewIt()
}
function viewIt() {
if(startH<=winHeight) {
if(iens6) {
theobj.style.visibility="visible"
if(iens6&&document.all) {
winWidth=inwidth
winHeight=inheight
}
theobj.style.width=winWidth
theobj.style.height=startH
if(iens6&&document.all) {
theobj.style.top=document.body.scrollTop+winPositionFromTop
//SET TOOLTIP DESCRIPTIONS BELOW
//Extend or contract array as needed

10个经典的网页鼠标特效代码

10个经典的⽹页⿏标特效代码1、⿏标指向出现实⽤特殊提⽰<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-CN" /><title>css打造⿏标触发效果</title><style type="text/css"></style><script type="text/javascript"><![CDATA[//><!]]></script></head><li id="conter1"><h2>找什么</h2><input id="jobKw" name="jobKw" type="text" /><ul id="conter3"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="externa </ul></li><li id="conter2"><h2>在那⾥</h2><input id="cityKw" name="cityKw" type="text" /><ul id="conter4"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="externa </ul></li></ul><div class="sbtn"><input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索⼯作" /></div><div class="searchMore"><a href="search_expert.html" rel="external nofollow" >⾼级搜索</a><br /><a href="search_sort.html" rel="external nofollow" >分类搜索</a> </div></form></div></body></html>2、跟随⿏标的流星<html><head><title>⽹页特效---跟随⿏标的流星</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><body bgColor="#000000"><script language="JavaScript"></script></body></html>3、跟随⿏标的三⾊彩带<html><head><title>⽹页特效--很酷的跟随⿏标的三⾊彩带</title></head><body bgColor=#000000><script language="JavaScript"></script></body></html>4、⿏标经过滚动提⽰⽂字<a href="http://www.⽹址.com" rel="external nofollow" _fcksavedurl="http://www.⽹址.com" target="_blank" onMouseOver="helpor_net_show(this,event,'⽹页⿏标特效')" onMouseOut="helpor_net_hide()">把⿏标放上来试试</a> <div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell"><layer name="nstip" width="1000px" bgColor="seashell"></layer></div><SCRIPT language="JavaScript"></SCRIPT>5、围绕⿏标旋转的三叶空间旋浆<html><head><title>围绕⿏标旋转的三叶空间旋浆</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><body bgColor="#000000"><scriptlanguage="JavaScript"></script><script language="JavaScript"></script></body></html>6、围绕⿏标的⽴体星环（摩天轮）<html><head><title>围绕⿏标的⽴体星环</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><script language="JavaScript"></script></head><body bgcolor="#000000"></body></html>7、围绕⿏标的⽴体旋转⽂字<html><head><title>围绕⿏标的⽴体旋转⽂字</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><meta content="Microsoft FrontPage 5.0" name="GENERATOR"></head><body><script LANGUAGE="JavaScript"></script></body></html>8、跟随⿏标的⽇期时间表盘<html><head><title>跟随⿏标的⽇期时间表盘</title></head><BODY><SCRIPT language=JavaScript><!--dCol="0000FF"fCol="FF0000"sCol="00FF00"mCol="000000"hCol="000000"ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouseX=100;d=new Array("星期⽇","星期⼀","星期⼆","星期三","星期四","星期五","星期六");m=new Array("1⽉","2⽉","3⽉","4⽉","5⽉","6⽉","7⽉","8⽉","9⽉","10⽉","11⽉","12⽉");date=new Date();day=date.getDate();year=date.getYear();if (year < 2000) year=year+1900;TodaysDate="年 "+m[date.getMonth()]+" "+day+"⽇ "+d[date.getDay()]+" "+year;D=TodaysDate.split('');H='...';H=H.split('');M='....';M=M.split('');S='.....';S=S.split('');Face='1 2 3 4 5 6 7 8 9 10 11 12';font='Arial';size=1;speed=0.6;ns=(yers);ie=(document.all);Face=Face.split(' ');n=Face.length;a=size*10;ymouse=0;xmouse=0;scrll=0;props="<font face="+font+" size="+size+" color="+fCol+">";props2="<font face="+font+" size="+size+" color="+dCol+">";Split=360/n;Dsplit=360/D.length;HandHeight=ClockHeight/4.5HandWidth=ClockWidth/4.5HandY=-7;HandX=-2.5;scrll=0;step=0.06;currStep=0;y=new Array();x=new Array();Y=new Array();X=new Array();for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}if (ns){for (i=0; i < D.length; i++)document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');for (i=0; i < n; i++)document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');for (i=0; i < S.length; i++)document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');for (i=0; i < M.length; i++)document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');for (i=0; i < H.length; i++)document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');}if (ie){document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < D.length; i++)document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></div>');document.write('</div></div>');document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < n; i++)document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></div>');document.write('</div></div>');document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < H.length; i++)document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>'); document.write('</div></div>');document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < M.length; i++)document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>'); document.write('</div></div>')document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');for (i=0; i < S.length; i++)document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>'); document.write('</div></div>')}(ns)?window.captureEvents(Event.MOUSEMOVE):0;。

【网页特效代码-页面特效】这个是有立体感的导航条,立体感很强,也很

¡¾ÍøÒ³ÌØÐ§´úÂë-Ò³ÃæÌØÐ§¡¿Õâ¸öÊÇÓÐÁ¢Ìå¸ÐµÄµ¼º½Ìõ,Á¢Ìå¸ÐºÜÇ¿,Ò²ºÜ.txt TEXT-DECORATION: none}A:active {TEXT-DECORATION: none}A:hover {TEXT-DECORATION: none}.up {BORDER-RIGHT: #711200 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: white 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 9pt; PADDING-BOTTOM: 1px; BORDER-LEFT: white 1px solid; COLOR: #ff0000; PADDING-TOP: 1px; BORDER-BOTTOM: #711200 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #eadfd0}</STYLE><SCRIPT language=JavaScript></SCRIPT><SCRIPT language=JavaScript></SCRIPT>ÆäÇúÃÖ¸ß£¬ÆäºÍÃÖ¹Ñ¡£¸ßÉ½ÑöÖ¹£¬¾°ÐÐÐÐÖ¹¡£。

【网页特效代码-页面特效】在左上侧固定的导航条,而且有导航说明,是非常酷的效果

for(i=0;!x&&yers&&i<yers.length;i++) x=MM_findObj(n,yers[i].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
style="Z-INDEX: 1; LEFT: 2px; WIDTH: 43px; POSITION: absolute; TOP: 4px; HEIGHT: 277px"><IMG
height=290 src="photo/menu0128.gif" width=42 useMap=#Map2 border=0>
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
<TABLE height="100%" cellSpacing=0 borderColorDark=#990000 cellPadding=4
width="100%" bgColor=#ffffff borderColorLight=#990000 border=1>

网特效代码面特效幻影般的导航条鼠标放上去就显示导航条

网特效代码面特效幻影般的导航条鼠标放上去就显示导航条公司内部档案编码：[OPPTR-OPPT28-OPPTL98-OPPNN08]【网页特效代码-页面特效】幻影般的导航条,鼠标放上去就显示导航条.txt<SCRIPT language=JavaScript>var currTimerlinePoint = 0;var totalTimerlineFrames = 2;var timerlineTimer;var leftLine = 50;var timerIn;var timerOut;var timerlineArray = new Array();timerlineArray[0]='';timerlineArray[1]='menuItemOut()';function runTimerline(){//if (totalTimerlineFrames > currTimerlinePoint)// {// eval( timerlineArray[currTimerlinePoint]);// currTimerlinePoint ;// }//else {currTimerlinePoint = 0;clearTimeout(window.timerlineTimer); return false;}//window.timerlineTimer = setTimeout('runTimerline()',1000); window.timerlineTimer = setTimeout('menuItemOut()',500);}function stopTimerline(){clearTimeout(window.timerlineTimer);//currTimerlinePoint = 0;}function menuItemIn(){if( leftLine != 150){item11.style.pixelLeft = 20; item11.filters.alpha.opacity = 20; item12.style.pixelLeft -= 20; item12.filters.alpha.opacity = 20;20;item14.style.pixelLeft -= 20; item14.filters.alpha.opacity = 20;item15.style.pixelLeft = 20; item15.filters.alpha.opacity = 20;item16.style.pixelLeft -= 20; item16.filters.alpha.opacity = 20;item17.style.pixelLeft = 20; item17.filters.alpha.opacity = 20;item18.style.pixelLeft -= 20; item18.filters.alpha.opacity = 20;item19.style.pixelLeft = 20; item19.filters.alpha.opacity = 20;item20.style.pixelLeft -= 20; item20.filters.alpha.opacity = 20;leftLine = 20;}else{clearTimeout(window.timerIn);return false;}timerIn=window.setTimeout('menuItemIn()',1);}function menuItemOut(){clearTimeout(window.timerIn);if (leftLine != 50){item11.style.pixelLeft -= 20; item11.filters.alpha.opacity -= 20;item12.style.pixelLeft = 20; item12.filters.alpha.opacity -= 20;item13.style.pixelLeft -= 20; item13.filters.alpha.opacity -= 20;item14.style.pixelLeft = 20; item14.filters.alpha.opacity -= 20;= 20;item16.style.pixelLeft = 20; item16.filters.alpha.opacity -= 20;item17.style.pixelLeft -= 20; item17.filters.alpha.opacity -= 20;item18.style.pixelLeft = 20; item18.filters.alpha.opacity -= 20;item19.style.pixelLeft -= 20; item19.filters.alpha.opacity -= 20;item20.style.pixelLeft = 20; item20.filters.alpha.opacity -= 20;leftLine -= 20;}else{clearTimeout(window.timerOut);return false;}timerOut=window.setTimeout("menuItemOut()",1);}self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);</SCRIPT><DIV style="LEFT: 0px; POSITION: absolute; TOP: -30px"><DIV id=menu01 onmouseover=stopTimerline();menuItemIn()style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 1; LEFT: 150px; BORDER-LEFT: #000000 1px; WIDTH: 100px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM:#000000 1px; POSITION: absolute; TOP: 33px; HEIGHT: 19px; BACKGROUND-COLOR: #000099; layer-background-color: #000099" onmouseout=runTimerline() align=center><FONT color=white>主菜单</DIV><DIV id=item11onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 2; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 55px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项一</DIV><DIV id=item12onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 3; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 77px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项二</DIV><DIV id=item13onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 4; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 99px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项三</DIV><DIV id=item14onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 5; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 121px;HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项四</DIV><DIV id=item15onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 143px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项五</DIV><DIV id=item16onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 165px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项六</DIV><DIV id=item17onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 187px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项七</DIV><DIV id=item18onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 209px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项八</DIV><DIV id=item19onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 231px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项九</DIV><DIV id=item20onmouseover="this.style.backgroundColor='#006699';stopTimerline()"style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 6; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 253px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()" align=center>菜单项十</DIV></DIV>Ｑ291911320。

【网页特效代码-页面特效】QQ样式的页面内导航条,效果很酷的哟,值得一用

{
obj = document.all.tags("div")[i];
objbuttom = bodyHeight + headHeight * (countid - 2);
if (countid == idnumber)
{
movedown(obj,objbuttom,false);
//function moveme(obj)该函数判断单元的移动，并调用相应的函数处理，obj参数为母体
//function moveup(obj,objtop)该函数使一个单元向上移动，参数obj为母体，objtop为母体的本身最高高度
//function movedown(obj,objbuttom)该函数使一个单元向下移动，参数obj为母体，objbuttom为母体的本身最低高度
}
function moveme(obj)
{ பைடு நூலகம்
idnumber = parseInt(obj.id.substr(4));
objtop = headHeight * (idnumber - 1);
objbuttom = bodyHeight + headHeight * (idnumber - 2);
<div align="center">朋友</div>
<tr>
<td id="item2head" height="20" class="headtd1" onclick="showme(item2body,this)">
<div align="center">邮箱</div>

导航条设置代码css+div

导航条设置代码css+div以下文字内容可以一同复制使用，不会影响到使用效果哦！/* 导航条背景色*/.skin-box-bd .menu-list{background: none repeat scroll 0 0 #570033;}/*首页/店铺动态背景色*/.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #570033;}/*首页/店铺动态右边线*/.skin-box-bd .menu-list .menu{border-right:1px #570033 solid;}/*首页/店铺动态文字颜色*/.skin-box-bd .menu-list .menu .title{color:#570033}/*所有分类背景色*/.all-cats .link{background: none repeat scroll 0 0 #570033;}/*所有分类右边线*/.all-cats .link{border-right:1px #570033 solid;}/*所有分类文字颜色*/.skin-box-bd .all-cats .title{color:#ff0000}<a target="_blank" href="/getcid.aw?v=2&uid=791205223%40qq.co m&site=cntaobao&s=1&groupid=0&charset=utf-8"><img border="0" src="/online.aw?v=2&uid=791205223% &site=cntaobao&s=1&charset=utf-8" alt="点击这里给我发消息" /></a>。

网页制作导航栏代码

left:15px;
top:34px;
width:141px;
height:116px;
z-index:1;
}
#Layer2 {
position:absolute;
left:97px;
top:32px;
width:109px;
height:120px;
z-index:2;
}
-->
</style>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
<body>
<div id="Layer1" style="display:none">子菜单<br />子菜单</div>
<div id="Layer2" style="display:none">子菜单<br />子菜单</div>
<a onmouseover="Layer1.style.display='';" onmouseout="Layer1.style.display='none';">菜单一</a>

导航栏代码

1前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY ！！！OK！我们要做的导航条的效果如下：鼠标移动上去背景变黑，并且字体颜色变成白色其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做就是了，呵呵【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟~代码如下：HTML代码：<div id="nav"></div>CSS代码：复制代码代码如下:#nav{width:960px;height:35px;background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/margin:0 auto;/*水平居中*/margin-top:30px;/*顶部30px*/}还有一点需要提醒的是，为了页面在浏览器的兼容性，不要忘记在CSS文件顶部加入标签重置代码哟~代码：body,div{padding:0; margin:0;}这里就不多说了，不明白的就看，课程顶部的课程关键词怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间，并且所有浏览器效果一样呢~呵呵(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的，本身我把整个XHTML+CSS的理论都压缩到教程里了，或者说教程的“知识点浓度”很高，有时需要你一字不漏的去品我说的话，不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了，KwooJan保证你以后只要做出个页面就很Easy的兼容各种浏览器，并且代码绝对的精简！CSS文件加载速度大大提升哟~)【第二步】盒子做好了，我们就要往里面放导航条中的内容了“CSS学习学前准备入门教程提高教程布局教程精彩应用”，如果我们把这内容(目前有6个)，当成酒杯的话，如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，但是我们平时会用一个隔板将每个酒杯隔开，这样就是酒杯很有序的放入盒子，并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“有序列表”起个英文名字叫：ul,里面的每个单元格我们也给起个英文名字叫“li”，大家想想里面的这个ul是不是和盒子里面的空间一样大，小了，酒杯放不进去，大了杯子就会不稳，所以我们定义UL的时候大小一定也要和外面的盒子一样大哟~,所以呢，我们的代码就知道怎么写了吧HTML代码复制代码代码如下:<div id="nav"><ul><li>CSS学习</li><li>学前准备</li><li>入门教程</li><li>提高教程</li><li>布局教程</li><li>精彩应用</li></ul></div>CSS代码：复制代码代码如下:#nav ul{width:960px;height:35px;}效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)：效果不一样吧，没关系，IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想~~~想出来了没有？什么没有？没关系，我带着大家想想，因为<li>标签也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个<li>,所以他们六个就像台阶似的纵向排列起来了，我提示到这里，大家应该知道怎么做才能让这些“酒杯”横向排列了吧！^_^对喽~用浮动Float！可是让谁浮动呢，当然是<li>标签喽~代码如下：#nav ul li{ float:left;}效果是不是和下面的一样呢大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的1）盒子(#nav)高度不一样2) 在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！解决上面这两个问题，也很容易，如下1）做到这里标签ul和li有没有进行重置？只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}”2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在li标签的CSS属性中加入“list-style:none;”就OK了现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~如果你做到这里的效果和我说的不一样，没关系，我把做到目前第二步的代码发出来，你对着上面说的再看看，绝对可以学会导航条1.rar (763 Bytes) 下载次数: 299【第三步】第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。

各种网页导航栏代码

<title></title><style>body {font-size:12px;font-family:宋体}ul.TabBarLevel1{list-style:none;margin:0;padding:0;height:29px;background-image:url(/2k5/sys/component/tabbar_level1_bk.gif); }ul.TabBarLevel1 li{float:left;padding:0;height:29px;margin-right:1px;background:url(/2k5/sys/component/tabbar_level1_slice_left_bk.gif) left top no-repeat;}ul.TabBarLevel1 li a{display:block;line-height:29px;padding:0 20px;color:#333;background:url(/2k5/sys/component/tabbar_level1_slice_right_bk.gi f) right top no-repeat;white-space: nowrap;}ul.TabBarLevel1 li.Selected{background:url(/2k5/sys/component/tabbar_level1_slice_selected_l eft_bk.gif) left top no-repeat;}ul.TabBarLevel1 li.Selected a{background:url(/2k5/sys/component/tabbar_level1_slice_selected_ri ght_bk.gif) right top no-repeat;}ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{color:#333;}ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{color:#F30;text-decoration:none;}ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{color:#000;}ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{color:#F30;text-decoration:none;}div.HackBox {padding : 2px 2px ;border-left: 2px solid #6697CD;border-right: 2px solid #6697CD;border-bottom: 2px solid #6697CD;}</style></head><body><div id="Whatever"><ul class="TabBarLevel1" id="TabPage1"><li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">宝贝详情</a></li><li id="Tab2" class="Selected"><a href="#" onclick="Javascript:switchTab('TabPage1','Tab2');">其他信息</a></li><li id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');">出价记录</a></li><li id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">留言簿</a></li></ul><div class="HackBox"><br><br>XXXXXXXX<br></div></div><script language="JavaScript">//Switch Tab Effectfunction switchTab(tabpage,tabid){var oItem = document.getElementById(tabpage);for(var i=0;i<oItem.children.length;i++){var x = oItem.children(i);x.className = "";var y = x.getElementsByTagName('a');y[0].style.color="#333333";}document.getElementById(tabid).className = "Selected";<br></li><li style="text-align:center;"><FONT color=#ff0000>[1]</font> <a href="Article_177584_2.html">[2]</a> <a href="Article_177584_2.html">下一页</a> </li> <li><script src="/gg/end.js"></script><br><script language="javascript">function copypageurltitle(){var clipBoardContent='';clipBoardContent =document.title;clipBoardContent+='\r\n';clipBoardContent+=document.location;window.clipboardData.setData("Text",clipBoardContent);alert("标题和网址已经拷贝，请发给你QQ/Msn或者可以粘贴到论坛上和您的好友一起分享^_^ ");}</script><button onClick="copypageurltitle();">复制本页网址和标题，发送给你QQ/Msn的好友一起分享</button><br></li><li class="title">一种不错的网页导航栏原代码[网页特效] 相关文章：</li><li>·<a href="/InfoView/Article_188458.html" target="_blank" title="网页设计制作试题及参考答案">网页设计制作试题及参考答案</a></li><li>·<a href="/InfoView/Article_27653.html" target="_blank" title="五个反弹后门的源代码">五个反弹后门的源代码</a></li><li>·<a href="/InfoView/Article_195109.html" target="_blank" title="QQ空间非主流漂浮物代码10款">QQ空间非主流漂浮物代码10款</a></li><li>·<a href="/InfoView/Article_104373.html" target="_blank" title="QQ空间超炫彩色字导航代码">QQ空间超炫彩色字导航代码</a></li><li>·<a href="/InfoView/Article_20804.html" target="_blank" title="新仙剑奇侠传物品代码及金钱、人物属性、仙术修改">新仙剑奇侠传物品代码及金钱、人物属性、仙术修改</a></li><li>·<a href="/InfoView/Article_194619.html" target="_blank" title="《圣安地列斯》作弊代码码中英对照">《圣安地列斯》作弊代码码中英对照</a></li><li>·<a href="/InfoView/Article_157021.html" target="_blank" title="显示日期和时间_QQ 空间时间代码">显示日期和时间_QQ空间时间代码</a></li><li>·<a href="/InfoView/Article_58995.html" target="_blank" title="QQ空间自动刷留言板代码">QQ空间自动刷留言板代码</a></li><li class="title">一种不错的网页导航栏原代码[网页特效] 相关软件</li><li>·<a href="/SoftView/SoftView_54694.html" target="_blank" title="凯立德手机导航软件WindowMobile 0909 17B1ZF4 官方正式版">凯立德手机导航软件WindowMobile 0909 17B1ZF4 官方正式版</a></li><li>·<a href="/SoftView/SoftView_49278.html" target="_blank" title="CSS 视频教程顶级网页设计师的必修曹鹏老师作品">CSS 视频教程顶级网页设计师的必修曹鹏老师作品</a></li><li>·<a href="/SoftView/SoftView_53146.html" target="_blank" title="《交错的视线》中文硬盘版">《交错的视线》中文硬盘版</a></li><li>·<a href="/SoftView/SoftView_44025.html" target="_blank" title="星光网页自动刷新器1.0">星光网页自动刷新器1.0</a></li><li>·<a href="/SoftView/SoftView_2031.html" target="_blank" title="佳易网页王V4.1">佳易网页王V4.1</a></li><li>·<a href="/SoftView/SoftView_38027.html" target="_blank" title="酒店宾馆饭店网站后台源代码网页模板1.00">酒店宾馆饭店网站后台源代码网页模板1.00</a></li><li>·<a href="/SoftView/SoftView_58384.html" target="_blank" title="《代码之美》">《代码之美》(精选中文版PDF格式)</a></li><li>·<a href="/SoftView/SoftView_29248.html" target="_blank" title="精美网页制作工具Frontpage2000">精美网页制作工具Frontpage2000</a></li><p>上一篇:<a href="/InfoView/Article_177583.html" title="一种利用网页框架设计的下拉菜单">一种利用网页框架设计的下拉菜单</a></p><p>下一篇:<a href="/InfoView/Article_177585.html" title="效果直逼flash的css+div+js 菜单">效果直逼flash的css+div+js菜单</a></p><li>特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作</li><li>者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。

JavaScript实现鼠标点击导航栏变色特效

JavaScript实现⿏标点击导航栏变⾊特效废话不多说了，直接给⼤家贴js实现⿏标点击导航栏变⾊代码，具体代码如下所⽰：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JAVASCRIPT之导航栏⿏标点击变⾊特效</title><style type="text/css">body {font-size:12px;font-family: Arial, Helvetica, sans-serif;}.ts_seled {color: #F00;}.ts_sel {color:#666;}</style><script language="javascript">window.onload = initLinkStyle;function initLinkStyle() {if(document.getElementsByName('myset')){var arrLink = document.getElementsByName('myset');for(i = 0; i < arrLink.length; i++) {var link = arrLink[i];link.className='ts_sel';link.onclick = clickNav;}}}/*** 执⾏点击事件* @param {Object} event ⿏标事件*/function clickNav(event) {var target = event.currentTarget;//上次选择的a的样式if(document.getElementsByName('myset')){var arrLink = document.getElementsByName('myset');for(i = 0; i < arrLink.length; i++) {var link = arrLink[i];if(link.className == 'ts_seled') {link.className = 'ts_sel';}}}target.className = 'ts_seled';return false;//阻⽌浏览器默认事件}</script></head><body><ul><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="myset">⾸页</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="myset">联系我们</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" name="myset">帮助</a></li></ul></body></html>以上所述是⼩编给⼤家介绍的JavaScript实现⿏标点击导航栏变⾊特效，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

item16.style.pixelLeft += 20; item16.filters.alpha.opacity -= 20;
item17.style.pixelLeft -= 20; item17.filters.alpha.opacity -= 20;
item18.style.pixelLeft += 20; item18.filters.alpha.opacity -= 20;
//window.timerlineTimer = setTimeout('runTimerline()',1000);
window.timerlineTimer = setTimeout('menuItemOut()',500);
}
function stopTimerline()
{
clearTimeout(window.timerlineTimer);
item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20;
item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20;
item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20;
}
else
{
clearTimeout(window.timerOut);
return false;
}
timerOut=window.setTimeout("menuItemOut()",1);
}
self.moveTo(0,0);
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"
align=center>菜单项二</DIV>
<DIV id=item13
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
item18.style.pixelLeft -= 20; item18.filters.alpha.opacity += 20;
item19.style.pixelLeft += 20; item19.filters.alpha.opacity += 20;
item20.style.pixelLeft -= 20; item20.filters.alpha.opacity += 20;
item19.style.pixelLeft -= 20; item19.filters.alpha.opacity -= 20;
item20.style.pixelLeft += 20; item20.filters.alpha.opacity -= 20;
leftLine -= 20;
item13.style.pixelLeft -= 20; item13.filters.alpha.opacity -= 20;
item14.style.pixelLeft += 20; item14.filters.alpha.opacity -= 20;
item15.style.pixelLeft -= 20; item15.filters.alpha.opacity -= 20;
{
clearTimeout(window.timerIn);
if (leftLine != 50)
{
item11.style.pixelLeft -= 20; item11.filters.alpha.opacity -= 20;
item12.style.pixelLeft += 20; item12.filters.alpha.opacity -= 20;
item15.style.pixelLeft += 20; item15.filters.alpha.opacity += 20;
item16.style.pixelLeft -= 20; item16.filters.alpha.opacity += 20;
item17.style.pixelLeft += 20; item17.filters.alpha.opacity += 20;
【网页特效代码-页面特效】幻影般的导航条,鼠标放上去就显示导航条.txt
<SCRIPT language=JavaScript>
var currTimerlinePoint = 0;
var totalTimerlineFrames = 2;
var timerlineTimer;
var leftLine = 50;
onmouseColor= '#0099cc';runTimerline()"
align=center>菜单项一</DIV>
<DIV id=item12
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 1; LEFT: 150px; BORDER-LEFT: #000000 1px; WIDTH: 100px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 33px; HEIGHT: 19px; BACKGROUND-COLOR: #000099; layer-background-color: #000099"
leftLine += 20;
}
else
{
clearTimeout(window.timerIn);
return false;
}
timerIn=window.setTimeout('menuItemIn()',1);
}
function menuItemOut()
//currTimerlinePoint = 0;
}
function menuItemIn()
{
if( leftLine != 150)
{
item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20;
// {
// eval( timerlineArray[currTimerlinePoint]);
// currTimerlinePoint ++;
// }
//else {currTimerlinePoint = 0; clearTimeout(window.timerlineTimer); return false;}
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 5; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 121px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 4; FILTER: alpha(opacity=0); LEFT: 50px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 99px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; FONT-SIZE: 9pt; Z-INDEX: 3; FILTER: alpha(opacity=0); LEFT: 250px; BORDER-LEFT: #000000 1px; WIDTH: 99px; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 77px; HEIGHT: 19px; BACKGROUND-COLOR: #0099cc; layer-background-color: #0099CC"