Effect Chart:
Demo Code:
<ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <title>div+css to create exquisite navigation menu, Sky sorting collection. </title> <style> body{background-color: #000000; } #fbtn {display:none; Overflow:hidden; Border-style:solid; border-width:1px; Border-color: #e1e1c9 #e1e1c9 #6e6e56 #6e6e56; Padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt {position:relative; } #fbtn_txt div{height:30px; padding-top:11px; font-size:12px; Color: #800080; Text-align:center; Cursor:hand; } #fbtn_mask {background-color: #ffffff; position:relative; width:100%; height:100%; } </style> </pead> <body> "> Cloud-dwelling community, webmaster must have high-quality web effects and advertising code." Jb51.net, webmaster JS special effects. <pr> <!--Welcome to the cloud Habitat community, our site collects a large number of high-quality JS special effects, providing a lot of advertising code download, URL: www.jb51.net,zzjs@msn.com, with. NET to build Liang station--> <div id= fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div>jb51.net</div> <div> Yun-Habitat Community </div> </div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div> webmaster special effects </div> <div> ; Webmaster Special effects </div> </div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_ txt> <div> Web Effects </div> <div> Web effects </div> </div> </div> <div id=fbtn> <di V id=fbtn_mask></div> <div id=fbtn_txt> <div> Advertising Code </div> <div> Advertising Code </div> </ div> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div> you customize </div> <div> You custom </div> </div> </div> <div id=fbtn> <div id=fbtn_mask></d iv> <div id=fbtn_txt> <div> You customize </div> <div> you custom </div> </div> ;d IV id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div> you custom </div> <div> Your custom </div> </DIV> </div> <div id=fbtn> <div id=fbtn_mask></div> <div id=fbtn_txt> <div> you custom </div > <div> You custom </div> </div> </div> <script> var current=null; var t=null; for (Var i=0;i<fbtn.length;i++) {fbtn_txt[i].style.postop=-30; fbtn_mask[i].style.postop=-30; Fbtn[i].index=i; fbtn[i].style.display= "Block"; Fbtn[i].onmouseover=function () {if (!current) {current=this; Domove (This.index); else if (current!=this) {domove (current.index); Domove (This.index); Current=this; } fbtn[i].onmouseout=function () {if (event.toelement==this.parentelement&t==this) {domove (this.index); Current=null; }} function Domove (num) {var o=fbtn_txt[num]; var m=fbtn_mask[num]; if (o.style.postop<-60) {o.style.display= "none"; var t=o.children[1].innerhtml; o.children[1].innerhtml=o.children[0].innerhtml; o.children[0].innerhtml=t; o.style.postop=-30; o.style.display= "Block"; if (m.style.postop>30) m. style.postop=-30; else m.style.postop=0; } else{m.style.postop+=3; o.style.postop-=3; SetTimeout (' Domove (' +num+ ') ', 15); }} </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
