<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> dynamic Tumbling navigation bar </title> <style type=" 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 (yun_qi_ img/yl29.jpg) Repeat-x} div#nav ul{width:705px; List-style:none; margin-top:0; Margin-right:auto; margin-bottom:0; margin-left:0px; } Div#nav ul li{float:left; height:32px; Overflow:hidden; Background-image:url (yun_qi_img/yl30.jpg); Background-repeat:repeat-y; Background-position:right 0; 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#nav ul Li a{float:left; height:100%; Width:77px; Background:url (yun_qi_img/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#nav ul Li a.hover{clear:both; Background-position:0 -32px; width:77px; } Div#nav ul Li.on a{background-position:0 -32px; Div#nav ul Li.nobg{background:none}/*]]>/</style> </pead> <body> <div id= "NAV" > & Lt;ul class= "Clear" > <li> cloud Habitat </li> <li> Web effects </li> <li> Tools software </li> <li> SOURCE Download </li> <li> menu navigation </li> <li> layer and layout </li> <li> Forum Community </li> <li> AD Contact </ li> <li class= "NOBG" ></li> </ul> </div> <script type= "Text/javascript" >/* <! [cdata[*/Function nav (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 () {var inner,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 () {var c = _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 () {var c = _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 () {var container = document.getElementById (' nav '); var el_li = container.getelementsbytagname (' li '); var arr = []; for (var i = 0; i < el_li.length i++) {if (El_li[i].classname = = ' on ') continue; Arr[i] = new Nav (El_li[i], {speed:10, num:4}); } }) (); /*]]>/</script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
If you don't like this color, you can change the color of the picture in the code.
