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

  • 相关阅读:
    【LuoguP4156】论战捆竹竿
    各种需要背记的图论知识
    SSD:TensorFlow中的单次多重检测器
    YOLO: 3 步实时目标检测安装运行教程 [你看那条狗,好像一条狗!]
    Tensorflow 基于分层注意网络的文件分类器
    StarSpace是用于高效学习实体向量的通用神经模型
    vrn:基于直接体积回归的单幅图像大姿态三维人脸重建
    TensorFlow官方文档
    Machine Learning From Scratch-从头开始机器学习
    Awesome-Text-Classification:文本分类资源合集
  • 原文地址:https://www.cnblogs.com/webdm/p/2018777.html
Copyright © 2011-2022 走看看