Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 76508
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
跳动的菜单特效

分类： Html/Css

2014-09-12 09:51:21


点击(此处)折叠或打开

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  3. <title></title>
  4. <style type="text/css">

  6. </style>
  7. <script type="text/javascript">
  8. lastNo=0
  9. function re(menu_no){
  10. if(lastNo!=menu_no){
  11. cur=menu_no+1
  12. lastNo=menu_no
  13. rest()
  14. }else{
  15. cur=100
  16. }
  17. document.getElementById("board"+menu_no).style.visibility="visible"
  18. }
  19. function rest(){
  20. for(i=1;i<=4;i++){
  21. document.getElementById("hor"+i).style.top=20*i;
  22. document.getElementById("board"+i).style.visibility="hidden"
  23. }
  24. menu_num=4;
  25. act=1
  26. height=120+20
  27. speed=0;
  28. posY=0;
  29. }
  30. function huke(){
  31. if(act==1&&cur<100){
  32. speed=(height-posY)*0.69+speed*0.6
  33. posY+=speed
  34. for(i=cur;i<=menu_num;i++){
  35. document.getElementById("hor"+i).style.top=posY+(i-2)*20
  36. }
  37. if(Math.abs(height-posY)<0.5){
  38. for(i=cur;i<=menu_num;i++){
  39. document.getElementById("hor"+i).style.top=height+(i-2)*20
  40. }
  41. act=0
  42. }
  43. setTimeout("huke()",50)
  44. }
  45. }
  46. </script>
  47. </head>
  48. <body>
  49. <div id="hor1" onclick="re(1);huke()">中国站长站</div>
  50. <div id="hor2" onclick="re(2);huke()">Populor</div>
  51. <div id="hor3" onclick="re(3);huke()">Sports</div>
  52. <div id="hor4" onclick="re(4);huke()">Woman</div>
  53. <div id="board1"><a href="" target="_blank">http://www.chinaz.com</a></div>
  54. <div id="board2"><a href="" target="_blank">http://www.chinaz.com</a></div>
  55. <div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div>
  56. <div id="board4">1.二十一世纪最缺的是什么?人才<br />
  57. <a href="" target="_blank">http://www.chinaz.com</a>
  58. <a href="" target="_blank">http://www.chinaz.com</a></div>
  59. </body>

阅读(326) | 评论(0) | 转发(0) |
0

上一篇：鼠标放到链接上就会出现一个说明框，里面有滚动的

下一篇：CSS+div+js组合强大实现超酷菜单

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6