比PS;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.style.posTop=-30;
    fbtn_mask.style.posTop=-30;
    fbtn.index=i;
    fbtn.style.display="block";
    fbtn.onmouseover=function(){
        if(!current){
            current=this;
            domove(this.index);
            }
        else if(current!=this){
            domove(current.index);
            domove(this.index);
            current=this;
            }
        }
    fbtn.onmouseout=function(){
        if(event.toElement==this.parentElement&&current==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>

代码:

<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.style.posTop=-30;
    fbtn_mask.style.posTop=-30;
    fbtn.index=i;
    fbtn.style.display="block";
    fbtn.onmouseover=function(){
        if(!current){
            current=this;
            domove(this.index);
            }
        else if(current!=this){
            domove(current.index);
            domove(this.index);
            current=this;
            }
        }
    fbtn.onmouseout=function(){
        if(event.toElement==this.parentElement&&current==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>

演示地址：

第一个效果演示

第二个效果演示

不过有人说在 FF 下面无法显示效果。

来自：蓝色论坛 作者：mozart0

 

FF 下无效，楼主已经说明了。