学GOOGLE的一个特酷的效果实现的源码--K氏博客

最新日志

最新回复

我的相册

站点统计

2008-1-17 13:17:00

>>学GOOGLE的一个特酷的效果实现的源码

看了他的代码，太乱了，没有看明白。但明白原理的意思。自已写了一个，但我的javascript 不行，知道有很多地方可以优化，但不知道优化，谁的JAVASCRIPT好，帮着优化或重写一下。非常感谢。

这是需要的图片：

这是CSS：

程序代码

<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(/uploadfile/edu/uploadfile/200712/20071211123238895.png) no-repeat; display:block;height:33px; width:40px;}
</style>

布局(这里有点重复,希望优化一下):

程序代码

<div id="nav">
  <ul>
    <li id="info_1"><a onmouseover="onBg(1,1)" onmouseout="onBg(1,0)" href="http://www.zishu.cn/"><span id="span_1"></span>谷歌拼音输入法</a></li>
    <li id="info_2"><a onmouseover="onBg(2,1)" onmouseout="onBg(2,0)"  href="http://www.zishu.cn/"><span id="span_2"></span>谷歌工具条</a></li>
    <li id="info_3"><a onmouseover="onBg(3,1)" onmouseout="onBg(3,0)"  href="http://www.zishu.cn/"><span id="span_3"></span>手机位置</a></li>
    <li id="info_4"><a onmouseover="onBg(4,1)" onmouseout="onBg(4,0)"  href="http://www.zishu.cn/"><span id="span_4"></span>在线翻译</a></li>
    <li id="info_5"><a onmouseover="onBg(5,1)" onmouseout="onBg(5,0)"  href="http://www.zishu.cn/"><span id="span_5"></span>列车时刻</a></li>
    <li id="info_6"><a onmouseover="onBg(6,1)" onmouseout="onBg(6,0)"  href="http://www.zishu.cn/"><span id="span_6"></span>网速测试</a></li>
    <li id="info_7"><a onmouseover="onBg(7,1)" onmouseout="onBg(7,0)"  href="http://www.zishu.cn/"><span id="span_7"></span>万年历</a></li>
    <li id="info_8"><a onmouseover="onBg(8,1)" onmouseout="onBg(8,0)"  href="http://www.zishu.cn/"><span id="span_8"></span>这个不知道</a></li>
  </ul>
</div>

javascript:(这里也想优化一下)

程序代码

<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>

运行看一下效果:

HTML代码

点击下面的运行，可预览代码效果:

<!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" content="text/html; charset=utf-8" />
<title>google.cn 的一个效果</title>
<style>
/*http://www.cnwebshow.com*/
*{ 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(http://www.zishu.cn/attachments/month_0711/n20071113221019.png) no-repeat; display:block;height:33px; width:40px;}
</style>
</head>
<body>
<div id="nav">
  <ul>
    <li id="info_1"><a onmouseover="onBg(1,1)" onmouseout="onBg(1,0)" href="http://www.cnwebshow.com/"><span id="span_1"></span>谷歌拼音输入法</a></li>
    <li id="info_2"><a onmouseover="onBg(2,1)" onmouseout="onBg(2,0)"  href="http://www.cnwebshow.com/"><span id="span_2"></span>谷歌工具条</a></li>
    <li id="info_3"><a onmouseover="onBg(3,1)" onmouseout="onBg(3,0)"  href="http://www.cnwebshow.com/"><span id="span_3"></span>手机位置</a></li>
    <li id="info_4"><a onmouseover="onBg(4,1)" onmouseout="onBg(4,0)"  href="http://www.cnwebshow.com/"><span id="span_4"></span>在线翻译</a></li>
    <li id="info_5"><a onmouseover="onBg(5,1)" onmouseout="onBg(5,0)"  href="http://www.cnwebshow.com/"><span id="span_5"></span>列车时刻</a></li>
    <li id="info_6"><a onmouseover="onBg(6,1)" onmouseout="onBg(6,0)"  href="http://www.cnwebshow.com/"><span id="span_6"></span>网速测试</a></li>
    <li id="info_7"><a onmouseover="onBg(7,1)" onmouseout="onBg(7,0)"  href="http://www.cnwebshow.com/"><span id="span_7"></span>万年历</a></li>
    <li id="info_8"><a onmouseover="onBg(8,1)" onmouseout="onBg(8,0)"  href="http://www.cnwebshow.com/"><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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Kering | 阅读全文 | 回复(0) | 引用通告 | 编辑

上一篇：Asp与SQL存储过程初探和实际例子
下一篇：动网整合oblog

发表评论：

生活因感动而精彩,理想在创造中放飞　　　　　　　　　　　　　　　　　　　　　　　　http://www.52qj.com/blog/user1/2/index.html

Powered by Oblog.