google首页的动态菜单代码
2008年04月9日
by junstyle
250 views
0 comments
有待完善,写的比较丑陋!代码如下:
XML/HTML代码
- <style type="text/css">
- #nav{padding:0px; margin:0px; list-style:none;}
- #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;}
- #nav li div{background:#fff; padding-top:3px;}
- </style>
- <ul id="nav">
- <li style="background-position: 0px 0px"><div>视频</div></li>
- <li style="background-position: 0px -37px"><div>图片</div></li>
- <li style="background-position: 0px -74px"><div>资讯</div></li>
- <li style="background-position: 0px -111px"><div>地图</div></li>
- <li style="background-position: 0px -148px"><div>博客搜索</div></li>
- <li style="background-position: 0px -185px"><div>热榜</div></li>
- <li style="background-position: 0px -222px"><div>网站导航</div></li>
- </ul>
- <script>
- var timers=[];
- var posX=[0, -50, -102, -155, -207];
- var posY=[0, -37, -74, -111, -148, -185, -222];
- function init(){
- var nav = document.getElementById('nav').getElementsByTagName('li');
- for(var i=0; i<nav.length; i++){
- nav[i].i=i;
- nav[i].onmouseover=function(){
- var obj=this;
- obj.index=0; &nbs
p; - clearInterval(timers[obj.i]);
- timers[obj.i]=setInterval(function(){
- if(obj.index==4)
- clearInterval(timers[obj.i]);
- else
- obj.index=obj.index+1;
- obj.style.background="url(http://www.junstyle.com.cn/upload/200906012008252720.png) no-repeat "+posX[obj.index]+"px "+posY[obj.i]+"px";
- }, 60);
- };
- nav[i].onmouseout=function(){
- var obj=this;
- obj.index=4;
- clearInterval(timers[obj.i]);
- timers[obj.i]=setInterval(function(){
- if(obj.index==0)
- clearInterval(timers[obj.i]);
- else
- obj.index=obj.index-1;
- obj.style.background="url(http://www.junstyle.com.cn/upload/200906012008252720.png) no-repeat "+posX[obj.index]+"px "+posY[obj.i]+"px";
- }, 60);
- };
- }
- }
- init();
- </script>