google首页的动态菜单代码

2008年04月9日
by junstyle
250 views
0 comments

有待完善，写的比较丑陋！代码如下：

XML/HTML代码
  1. <style type="text/css">
  2. #nav{padding:0px; margin:0px; list-style:none;}
  3. #nav li{font-size:12px; cursor:pointer; padding-top:37px; width:52px; text-align:center; float:left; background: url(http://www.junstyle.com.cn/upload/200906012008252720.png) no-repeat 0px 0px;}
  4. #nav li div{background:#fff; padding-top:3px;}
  5. </style>
  7. <ul id="nav">
  8. <li style="background-position: 0px 0px"><div>视频</div></li>
  9. <li style="background-position: 0px -37px"><div>图片</div></li>
  10. <li style="background-position: 0px -74px"><div>资讯</div></li>
  11. <li style="background-position: 0px -111px"><div>地图</div></li>
  12. <li style="background-position: 0px -148px"><div>博客搜索</div></li>
  13. <li style="background-position: 0px -185px"><div>热榜</div></li>
  14. <li style="background-position: 0px -222px"><div>网站导航</div></li>
  15. </ul>
  17. <script>
  18. var timers=[];
  19. var posX=[0, -50, -102, -155, -207];
  20. var posY=[0, -37, -74, -111, -148, -185, -222];
  21. function init(){
  22. var nav = document.getElementById('nav').getElementsByTagName('li');
  23. for(var i=0; i<nav.length; i++){
  24. nav[i].i=i;
  25. nav[i].onmouseover=function(){
  26. var obj=this;
  27. obj.index=0; &nbs
    p;
  28. clearInterval(timers[obj.i]);
  29. timers[obj.i]=setInterval(function(){
  30. if(obj.index==4)
  31. clearInterval(timers[obj.i]);
  32. else
  33. obj.index=obj.index+1;
  34. obj.style.background="url(http://www.junstyle.com.cn/upload/200906012008252720.png) no-repeat "+posX[obj.index]+"px "+posY[obj.i]+"px";
  35. }, 60);
  36. };
  37. nav[i].onmouseout=function(){
  38. var obj=this;
  39. obj.index=4;
  40. clearInterval(timers[obj.i]);
  41. timers[obj.i]=setInterval(function(){
  42. if(obj.index==0)
  43. clearInterval(timers[obj.i]);
  44. else
  45. obj.index=obj.index-1;
  46. obj.style.background="url(http://www.junstyle.com.cn/upload/200906012008252720.png) no-repeat "+posX[obj.index]+"px "+posY[obj.i]+"px";
  47. }, 60);
  48. };
  49. }
  50. }
  51. init();
  52. </script>

JAVASCRIPT, 未分类