效果直逼flash的Div+Css+Js菜单

更新时间：2007年05月17日 00:00:00 作者：

效果直逼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-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:12px;  color:#800080;  text-align:center;  cursor:hand;  }  #fbtn_mask{  background-color:#ffffff;  position:relative;  width: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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

效果直逼flash的Div+Css+Js菜单

关于微信小程序登录的那些事
这篇文章主要给大家介绍了关于微信小程序登录的那些事，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
JavaScript三种绑定事件方式及相互之间的区别分析
这篇文章主要介绍了JavaScript三种绑定事件方式及相互之间的区别,结合具体实例形式分析了javascript事件绑定方式的基本实现方法与相互之间的区别,需要的朋友可以参考下
2017-01-01
js 生成密匙流脚本代码
js 生成密匙流脚本代码...
2007-09-09
JavaScript设计模式之职责链模式
这篇文章主要介绍了JavaScript设计模式之职责链模式，对设计模式感兴趣的同学，可以参考下
2021-04-04
js arguments.callee的应用代码
arguments.callee的使用方法，具体大家自己测试了
2009-05-05
Exif.js图片旋转修正的方法
这篇文章主要为大家详细介绍了Exif.js图片旋转修正的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
js实现的点击数量加一可操作数据库
这篇文章主要介绍了js如何实现的点击数量加一操作数据库,需要的朋友可以参考下
2014-05-05
详解CocosCreator制作射击游戏
这篇文章主要介绍了CocosCreator制作射击游戏，各个方面都讲的比较详细，希望同学们自己动手试一下
2021-04-04
JavaScript设计模式之职责链模式应用示例
这篇文章主要介绍了JavaScript设计模式之职责链模式,结合实例形式分析了javascript责任链模式的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
2018-08-08
uni-app中px与rpx的转换方法
这篇文章主要给大家介绍了关于uni-app中px与rpx的转换方法,rpx单位最初由微信推出,它与我们常用px一个很大的区别就是具有响应式,需要的朋友可以参考下
2023-10-10

效果直逼flash的Div+Css+Js菜单

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具