<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>动态翻滚的导航条</title>
<styletype="text/css">
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clear{display:inline-block}.clear{display:block}
div#nav{height:32px;background:url(images/YL29.jpg)repeat-x}
div#navul{
width:705px;
list-style:none;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:0px;
}
div#navulli{
float:left;
height:32px;
overflow:hidden;
background-image:url(images/YL30.jpg);
background-repeat:repeat-y;
background-position:right0;
padding-top:0;
padding-right:1px;
padding-bottom:0;
padding-left:0px;
font-family:Arial;
font-size:12px;
line-height:32px;
font-weight:bold;
}
div#navullia{
float:left;
height:100%;
width:77px;
background:url(images/YL28.jpg)repeat-x;
color:#fff;
text-decoration:none;
padding-top:0;
padding-right:5px;
padding-bottom:0;
padding-left:5px;
text-align:center;
}
div#navullia.hover{
clear:both;
background-position:0-32px;
width:77px;
}
div#navulli.ona{
background-position:0-32px;
}
div#navulli.nobg{background:none}
/*]]>*/
</style>
</head>
<body>
<divid="nav">
<ulclass="clear">
<li><ahref="#">脚本之家</a></li>
<li><ahref="#">网页特效</a></li>
<li><ahref="#">工具软件</a></li>
<li><ahref="#">脚本下载</a></li>
<li><ahref="#">菜单导航</a></li>
<li><ahref="#">层和布局</a></li>
<li><ahref="#">论坛社区</a></li>
<li><ahref="#">广告联系</a></li>
<liclass="nobg"></li>
</ul>
</div>
<scripttype="text/javascript">
/*<![CDATA[*/
functionnav(c,config){
this.config=config||{speed:10,num:2};
this.container=(typeof(c)=="object")?c:document.getElementById(c);
this.lineHeight=this.container.offsetHeight;
this.scrollTimeId=null;
var_this=this;
this.__construct=function(){
varinner,el,href;
inner=_this.container.childNodes[0].innerHTML;
href=_this.container.childNodes[0].href;
el=document.createElement("a");
el.innerHTML=inner;
el.href=href;
el.className='hover';
_this.container.appendChild(el);
_this.container.onmouseover=function(){_this.start()};
_this.container.onmouseout=function(){_this.end()};
}();
this.start=function(){
_this.clear();
_this.scrollTimeId=setTimeout(function(){_this.scrollUp();},_this.config.speed);
};
this.end=function(){
_this.clear();
_this.scrollTimeId=setTimeout(function(){_this.scrollDown();},_this.config.speed);
};
this.scrollUp=function(){
varc=_this.container;
if(c.scrollTop>=_this.lineHeight){c.scrollTop=_this.lineHeight;return;}
c.scrollTop+=_this.config.num;
_this.scrollTimeId=setTimeout(function(){_this.scrollUp();},_this.config.speed);
};
this.scrollDown=function(){
varc=_this.container;
if(c.scrollTop<=0){c.scrollTop=0;return;}
c.scrollTop-=_this.config.num;
_this.scrollTimeId=setTimeout(function(){_this.scrollDown();},_this.config.speed);
};
this.clear=function(){clearTimeout(_this.scrollTimeId)};
}
(function(){
varcontainer=document.getElementById('nav');
varel_li=container.getElementsByTagName('li');
vararr=[];
for(vari=0;i<el_li.length;i++){
if(el_li[i].className=='on')continue;
arr[i]=newnav(el_li[i],{speed:10,num:4});
}
})
();
/*]]>*/
</script>
</body>
</html>
|
运行时间载入中.....