<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> 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=fbtn[i].onmouseout=function(){ if(event.srcElement!=this) return; var x=/over/i.test(event.type)?event.fromElement:event.toElement; if(x==this.parentElement||x==this.previousSibling||x==this.nextSibling) domove(this.index); } } 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>
 提示：您可以先修改部分代码再运行

如果有高手不小心进来了，看看下面的另一个版本，脚本完跟上面相同，区别只在border的宽度。但是这里面除非你极慢地移动鼠标，否则它们马上就变得花一块白一块了（其实上面也有类似问题，没这么严重）。就是说，浏览器把一些事件给弄丢了。请问如何解决？

<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:13px; 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> 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=fbtn[i].onmouseout=function(){ if(event.srcElement!=this) return; var x=/over/i.test(event.type)?event.fromElement:event.toElement; if(x==this.parentElement||x==this.previousSibling||x==this.nextSibling) domove(this.index); } } 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>
 提示：您可以先修改部分代码再运行

改进的代码见6层。(by Bound0)

[ 本帖最后由 bound0 于 2006-7-30 15:49 编辑 ]

好象有点 bug的说！不过很不错诶！

好

好>

效果不错，收了

Bug已修正
其实只要加一个小小的变量...
先前钻进牛角尖了

<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&&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[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&&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>
 提示：您可以先修改部分代码再运行

岂止不错啊,简直堪称经典啊,我好喜欢啊

很赞的效果.

效果非常好!

莫扎特：服了你了！
收了效果，再研究一下，不懂再问你。

还有几点疑问：
首先，这个程序的兼容性有问题，IE才可用。
其次，这里用了多个重名ID，这不是和ID唯一性原则相悖了吗？

渴望你的解答！希望再完善一下脚本在不同浏览器下兼容性的问题

多谢各位抬举
图个省事，一直用ID引用元素，用同ID做对象数组
有空我再改改
其实楼上的兄弟们只要看得懂的，都不妨一改

那用什么做数组呢？
<div>标签无name属性，那该怎么办？

放到1个div里取ID再getElementsByTag就好了呀

用getElementsByTag那不是全取<div>标签了吗（包含了子<div>标签）？

好极！！！

实在值得收藏的经典

效果不错
不过正如zbm2001z所说,这里面的id重复命名了,这样的程序只能在IE中动行,像firefox之类的浏览器是看不到效果的

真强！～～～～

我把它拷过来怎么就不行了呀，请高手指点一下呀

太好看了收下

不错，支持一下

先收了，有空再研究

先收了，有空再研究

还行。。但只相对效果来说，但不实用，做这行的话，不可能会用到那么多的代码来试现一个效果的，还有如用动画直接来玩成。

赞一个

对象数组不是问题，就算不用，在ID里嵌一个数字编号，Eval一下也就也出来了

但是在FireFox里，竟没有window.event这么一个东西
哪位知道，相应的东西是什么，还请指教

to oyangbin:
我确实不是干这行的，发这帖子也无非是给初学JS的兄弟们给个简单的例子罢了。
——冒昧地问一句，您真是干这行的吗？上面的东西看起来一大堆，大多是定义样式、无素，真正算得上代码的，不过四五十行。关键在这里：代码就是可重用的甚至通用的东西，样式和元素则是可以可变的易修改的。没有人会用编出几十几百行代码来仅仅是为了造几个按钮，不管他是不是一辈子没见过几行代码是干这行的还是不是。——当然我承认，上面做得不并不好：代码不能通行，样式也没完全与代码隔离
Flash绝对是个好东西，有了它你甚至可以忘记世界上还有代码这么一种东西（如果您只想用它做一些是人都会做的事的话），因为Flash用它本身数以万行计的代码帮你做了。可以肯定的是，它帮人省去的代码，将不能再以万行计。我说仿Flash，实在是怀着对Flash的万分景仰。站在Flash的基石上，我们可以一无所知却挥洒自如（正如我们也可以对电脑对程序一知半解却声称正在用JS编程）。但是Flash（以及JS）只是工具，绝不应该成为一个开发者的终极理想。不明白这一点，你可以是一个好的网页设计师，甚至是一个不错的程序员，但是你永远不会明白代码是一种什么东西，代码的行数应该怎样计算。
——说多了。不是要跟谁争什么。倒谈起我的代码观来了：）

其实用flash做写的代码不见得就少多少  呵呵
个人觉得这类东西创意才是最重要的 至于用什么工具实现倒是无关紧要了

强

厉害  这你都能做出来~~真牛啊