zoukankan      html  css  js  c++  java
  • Js+Css仿Flash效果导航菜单代码

    代码简介:

    很动感的FLASH效果的DIV+Css网站导航菜单,竖向排列,响应鼠标运作,还有光照特效,很有动感的样子,界面也挺漂亮,值得收藏一下。

    代码内容:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Js+Css仿Flash效果导航菜单代码_网页代码站(www.webdm.cn)</title>
    <style>
    body{
     background-color:#B8B8A0;
     }
    #fbtn{
     display:none;
     overflow:hidden;
     border-style:solid;
     border-1px;
     border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
     padding:1 1 1 1;
     115px;
     height:30px;
     }
    #fbtn_txt{
     position:relative;
     }
    #fbtn_txt div{
     height:30px;
     padding-top:11px;
     font-size:9px;
     font-family:small fonts;
     color:#800080;
     text-align:center;
     cursor:hand;
     }
    #fbtn_mask{
     background-color:#ffffff;
     position:relative;
     100%;
     height:100%;
     }
    </style>
    
    </head>
    
    <body>
    <div id=fbtn>
     <div id=fbtn_mask></div>
     <div id=fbtn_txt>
     <div>HOME</div>
     <div><a href="/">WebDm.cn</a></div>
     </div>
    </div>
    <div id=fbtn>
     <div id=fbtn_mask></div>
     <div id=fbtn_txt>
     <div>ASP</div>
     <div>ASP Code</div>
     </div>
    </div>
    <div id=fbtn>
     <div id=fbtn_mask></div>
     <div id=fbtn_txt>
     <div>PHP</div>
     <div>PHP Code</div>
     </div>
    </div>
    <div id=fbtn>
     <div id=fbtn_mask></div>
     <div id=fbtn_txt>
     <div>.NET</div>
     <div>ASP.NET Code</div>
     </div>
    </div>
    <div id=fbtn>
     <div id=fbtn_mask></div>
     <div id=fbtn_txt>
     <div>JSP</div>
     <div>JSP Code</div>
     </div>
    </div>
    <div id=fbtn>
     <div id=fbtn_mask></div>
     <div id=fbtn_txt>
     <div>Ajax</div>
     <div>Ajax Demo</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>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/0226f950-408f-46d7-8bae-1604ee48aba3.html

  • 相关阅读:
    大型架构.net平台篇(中间层均衡负载WCF)
    大型高性能ASP.NET系统架构设计
    百万级访问量网站的技术准备工作
    容器管理的分布式事务
    SQL Server 2005实现负载均衡
    nginx负载均衡 tomcat集群 memcache共享session
    JTA实现跨数据库操作
    [AX]AX2012 Table的AOSAuthorization 属性
    [AX]AX2012 Form上的ReferenceGroup control
    [AX]AX2012 Form开发概览
  • 原文地址:https://www.cnblogs.com/webdm/p/2018777.html
Copyright © 2011-2022 走看看