一种仿Flash风格的按钮

<style>
body{
    background-color:#B8B8A0;
    }
#fbtn{
    display:none;
    overflow:hidden;
    border:3 solid white;
    padding:1 1 1 1;
    margin-bottom:3px;
    width:115px;
    height:30px;
    }
#fbtn_txt{
    position:relative;
    }
#fbtn_txt div{
    height:30px;
    padding-top:13px;
    font-size:9px;
    font-family:small fonts;
    color:chocolate;
    text-align:center;
    cursor:hand;
    }
#fbtn_mask{
    background-color:#ffffff;
    position:relative;
    width:100%;
    height:100%;
    }
</style>

<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 mozart0</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 mozart0</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;
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(&#39;domove(&#39;+num+&#39;)&#39;,15);
        }
    }
</fbtn></script>

<style>
body{
    background-color:#B8B8A0;
    }
#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:9px;
    font-family:small fonts;
    color:#800080;
    text-align:center;
    cursor:hand;
    }
#fbtn_mask{
    background-color:#ffffff;
    position:relative;
    width:100%;
    height:100%;
    }
</style>

<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 mozart0</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 mozart0</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;
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(&#39;domove(&#39;+num+&#39;)&#39;,15);
        }
    }
</fbtn></script>