css+div的flash效果菜单

效果很不错的flash菜单,不过是用css+div实现的,这样的效果很新颖. 

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <title>css 菜单</title>  
  5. <style>  
  6. body{   
  7.  background-color:#B8B8A0;   
  8.  }   
  9. #fbtn{   
  10.  display:none;   
  11.  overflow:hidden;   
  12.  border-style:solid;   
  13.  border-width:1px;   
  14.  border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;   
  15.  padding:1 1 1 1;   
  16.  width:115px;   
  17.  height:30px;   
  18.  }   
  19. #fbtn_txt{   
  20.  position:relative;   
  21.  }   
  22. #fbtn_txt div{   
  23.  height:30px;   
  24.  padding-top:11px;   
  25.  font-size:9px;   
  26.  font-family:small fonts;   
  27.  color:#800080;   
  28.  text-align:center;   
  29.  cursor:hand;   
  30.  }   
  31. #fbtn_mask{   
  32.  background-color:#ffffff;   
  33.  position:relative;   
  34.  width:100%;   
  35.  height:100%;   
  36.  }   
  37. </style>  
  38.   
  39. </head>  
  40.   
  41. <body>  
  42. <div id=fbtn>  
  43.  <div id=fbtn_mask></div>  
  44.  <div id=fbtn_txt>  
  45.  <div>G1</div>  
  46.  <div>good morning</div>  
  47.  </div>  
  48. </div>  
  49. <div id=fbtn>  
  50.  <div id=fbtn_mask></div>  
  51.  <div id=fbtn_txt>  
  52.  <div>G2</div>  
  53.  <div>good evening</div>  
  54.  </div>  
  55. </div>  
  56. <div id=fbtn>  
  57.  <div id=fbtn_mask></div>  
  58.  <div id=fbtn_txt>  
  59.  <div>M1</div>  
  60.  <div>my name is fireyy</div>  
  61.  </div>  
  62. </div>  
  63. <div id=fbtn>  
  64.  <div id=fbtn_mask></div>  
  65.  <div id=fbtn_txt>  
  66.  <div>M2</div>  
  67.  <div>mm mm i love u</div>  
  68.  </div>  
  69. </div>  
  70. <div id=fbtn>  
  71.  <div id=fbtn_mask></div>  
  72.  <div id=fbtn_txt>  
  73.  <div>G1</div>  
  74.  <div>good morning</div>  
  75.  </div>  
  76. </div>  
  77. <div id=fbtn>  
  78.  <div id=fbtn_mask></div>  
  79.  <div id=fbtn_txt>  
  80.  <div>G2</div>  
  81.  <div>good evening</div>  
  82.  </div>  
  83. </div>  
  84. <div id=fbtn>  
  85.  <div id=fbtn_mask></div>  
  86.  <div id=fbtn_txt>  
  87.  <div>M1</div>  
  88.  <div>my name is fireyy</div>  
  89.  </div>  
  90. </div>  
  91. <div id=fbtn>  
  92.  <div id=fbtn_mask></div>  
  93.  <div id=fbtn_txt>  
  94.  <div>M2</div>  
  95.  <div>mm mm i love u</div>  
  96.  </div>  
  97. </div>  
  98.   
  99. <script>  
  100. var current=null;   
  101. var t=null;   
  102. for(var i=0;i<fbtn.length;i++){   
  103.  fbtn_txt[i].style.posTop=-30;   
  104.  fbtn_mask[i].style.posTop=-30;   
  105.  fbtn[i].index=i;   
  106.  fbtn[i].style.display="block";   
  107.  fbtn[i].onmouseover=function(){   
  108.  if(!current){   
  109.  current=this;   
  110.  domove(this.index);   
  111.  }   
  112.  else if(current!=this){   
  113.  domove(current.index);   
  114.  domove(this.index);   
  115.  current=this;   
  116.  }   
  117.  }   
  118.  fbtn[i].onmouseout=function(){   
  119.  if(event.toElement==this.parentElementt==this){   
  120.  domove(this.index);   
  121.  current=null;   
  122.  }   
  123.  }   
  124.  }   
  125. function domove(num){   
  126.  var o=fbtn_txt[num];   
  127.  var m=fbtn_mask[num];   
  128.  if(o.style.posTop<-60){   
  129.  o.style.display="none";   
  130.  var t=o.children[1].innerHTML;   
  131.  o.children[1].innerHTML=o.children[0].innerHTML;   
  132.  o.children[0].innerHTML=t;   
  133.  o.style.posTop=-30;   
  134.  o.style.display="block";   
  135.  if(m.style.posTop>30)   
  136.  m.style.posTop=-30;   
  137.  else   
  138.  m.style.posTop=0;   
  139.  }   
  140.  else{   
  141.  m.style.posTop+=3;   
  142.  o.style.posTop-=3;   
  143.  setTimeout('domove('+num+')',15);   
  144.  }   
  145.  }   
  146. </script>  
  147. </body>  
  148. </html>  

标签:

分享:

1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕