效果直逼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菜单

Paypal支付不完全指北
这篇文章主要介绍了Paypal支付不完全指北，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
浅谈javascript中return语句
这篇文章主要给大家简单介绍了javascript中return语句，有需要的小伙伴可以参考下。
2015-07-07
JavaScript获取当前窗口内的宽度和高度汇总
这篇文章主要介绍了JavaScript获取当前窗口内的宽度和高度汇总的相关资料,需要的朋友可以参考下
2023-02-02
Javascript中将变量转换为字符串的三种方法
这篇文章主要给大家介绍了关于Javascript中将变量转换为字符串的三种方法，这三种方法分别是：value.toString()、"" + value和String(value)，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09
js中this用法实例详解
这篇文章主要介绍了js中this用法,实例分析了this指向windows、指向对象及改变this指向的相关技巧,需要的朋友可以参考下
2015-05-05
javascript省市级联功能实现方法实例详解
这篇文章主要介绍了javascript省市级联功能实现方法,以不同实例形式分析了JavaScript实现省市级联菜单的具体技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
js代码判断是否处于微信浏览器内两种方式
微信内置浏览器屏蔽了下载链接,如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,那么该如何判断用户是否是用微信浏览器呢?这篇文章主要给大家介绍了关于js代码判断是否处于微信浏览器内的两种方式,需要的朋友可以参考下
2023-10-10
javascript 手动给表增加数据的小例子
这篇文章介绍了js手动给表增加数据的实例代码，有需要的朋友可以参考一下
2013-07-07
layui框架与SSM前后台交互的方法
今天小编就为大家分享一篇layui框架与SSM前后台交互的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript常用数学函数用法示例
这篇文章主要介绍了JavaScript常用数学函数用法,结合实例形式分析了JavaScript常见的对数、平方、绝对值、正弦、四舍五入等相关数学函数使用技巧,需要的朋友可以参考下
2018-05-05