zoukankan      html  css  js  c++  java
  • 转载(效果直逼flash的Div+Css+Js菜单)

    <html>
    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=gb2312" />
    <title>css
    菜单</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:12px;
    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>G1</div>
    <div>good
    morning</div>
    </div>
    </div>
    <div
    id=fbtn>
    <div id=fbtn_mask></div>
    <div
    id=fbtn_txt>
    <div>G2</div>
    <div>good
    evening</div>
    </div>
    </div>
    <div
    id=fbtn>
    <div id=fbtn_mask></div>
    <div
    id=fbtn_txt>
    <div>M1</div>
    <div>my name is
    fireyy</div>
    </div>
    </div>
    <div
    id=fbtn>
    <div id=fbtn_mask></div>
    <div
    id=fbtn_txt>
    <div>M2</div>
    <div>mm mm i love
    u</div>
    </div>
    </div>
    <div id=fbtn>
    <div
    id=fbtn_mask></div>
    <div
    id=fbtn_txt>
    <div>G1</div>
    <div>good
    morning</div>
    </div>
    </div>
    <div
    id=fbtn>
    <div id=fbtn_mask></div>
    <div
    id=fbtn_txt>
    <div>G2</div>
    <div>good
    evening</div>
    </div>
    </div>
    <div
    id=fbtn>
    <div id=fbtn_mask></div>
    <div
    id=fbtn_txt>
    <div>M1</div>
    <div>my name is
    fireyy</div>
    </div>
    </div>
    <div
    id=fbtn>
    <div id=fbtn_mask></div>
    <div
    id=fbtn_txt>
    <div>M2</div>
    <div>mm mm i love
    u</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>
  • 相关阅读:
    项目结队开发---NABC分析(成员)
    梦断代码读后感(二)
    梦断代码读后感(一)
    首尾相连的循环数组求其子数组最大值
    子数组求和之大数溢出
    梦断代码读后感——终结
    软件工程结对开发——一维最大子数组求和溢出问题
    结对开发——求环形一维数组最大子数组的和
    结对开发——电梯调度问题需求分析
    软件工程——求二维数组所有子矩阵的和的最大值
  • 原文地址:https://www.cnblogs.com/liufei88866/p/1009342.html
Copyright © 2011-2022 走看看