子鼠仿GOOGLE的一个效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>google.cn 的一个效果</title>
<style>
/*http://www.zishu.cn*/
*{ padding:0; margin:0; list-style:none; font-size:12px;}
#nav{margin:50px;}
#nav li{padding:15px 0}
#nav li a{display:block;cursor:pointer;cursor:hand;}
#nav li a span{ margin:-15px 0 0 -40px;position:absolute; background:url(/upload/remotupload/2007111602729798.png) no-repeat; display:block;height:33px; width:40px;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li id="info_1"><a   href="http://www.webkey.cn/"><span id="span_1"></span>谷歌拼音输入法</a></li>
<li id="info_2"><a    href="http://www.webkey.cn/"><span id="span_2"></span>谷歌工具条</a></li>
<li id="info_3"><a    href="http://www.webkey.cn/"><span id="span_3"></span>手机位置</a></li>
<li id="info_4"><a    href="http://www.webkey.cn/"><span id="span_4"></span>在线翻译</a></li>
<li id="info_5"><a    href="http://www.webkey.cn/"><span id="span_5"></span>列车时刻</a></li>
<li id="info_6"><a    href="http://www.webkey.cn/"><span id="span_6"></span>网速测试</a></li>
<li id="info_7"><a    href="http://www.webkey.cn/"><span id="span_7"></span>万年历</a></li>
<li id="info_8"><a    href="http://www.webkey.cn/"><span id="span_8"></span>这个不知道</a></li>
</ul>
</div>
<script language="JavaScript">
var info = document.getElementById('nav');
function navScrollBg(e,num,flag) {
var a=[0,40,80,120,160,200,240];
var spans = document.getElementById('span_'+num);
if(flag == 1){
spans.style.backgroundPosition = (0 - a[e]) + 'px' + ' ' + (0-((num-1)*33)) +'px';
}else{
a.sort(function(b,c){return c-b;});
spans.style.backgroundPosition = (0 - a[e]) + 'px' + ' ' + (0-((num-1)*33)) +'px';
}
}
function onBg(num,flag){
for(var e=0; e<7; e++){
setTimeout("navScrollBg(" + e + "," + num +","+flag+")",40 * e);
}
}
</script>
</body>
</html>
posted @ 2008-02-14 18:59  龍峸.大卫  阅读(183)  评论(0)    收藏  举报