当前位置：网络学院首页 >> 设计教程 >> DIV特效代码 >> 实现google的一个效果

实现google的一个效果

来源：中国设计秀作者：点击：987 加入收藏

关键字：CSS特效 div 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" content="text/html; charset=gbk" />
<title>google.cn 的一个效果</title>
<style>
*{ 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.cssrain.cn/demo/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="#"><span id="span_1"></span>谷歌拼音</a></li>
    <li id="info_2"><a onmouseover="onBg(2,1)" onmouseout="onBg(2,0)"  href="#"><span id="span_2"></span>谷歌工具条</a></li>
    <li id="info_3"><a onmouseover="onBg(3,1)" onmouseout="onBg(3,0)"  href="#"><span id="span_3"></span>手机位置</a></li>
    <li id="info_4"><a onmouseover="onBg(4,1)" onmouseout="onBg(4,0)"  href="#"><span id="span_4"></span>在线翻译</a></li>
    <li id="info_5"><a onmouseover="onBg(5,1)" onmouseout="onBg(5,0)"  href="#"><span id="span_5"></span>列车时刻</a></li>
    <li id="info_6"><a onmouseover="onBg(6,1)" onmouseout="onBg(6,0)"  href="#"><span id="span_6"></span>网速测试</a></li>
    <li id="info_7"><a onmouseover="onBg(7,1)" onmouseout="onBg(7,0)"  href="#"><span id="span_7"></span>万年历</a></li>
    <li id="info_8"><a onmouseover="onBg(8,1)" onmouseout="onBg(8,0)"  href="#"><span id="span_8"></span>不知道</a></li>
  </ul>
</div>
<script language="JavaScript">
var info = document.getElementById('nav');
var vFlag = [];
var runFlag = [];
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,chk){
  
 if(typeof(runFlag[num])=='undefined'){
  runFlag[num]=[]; 
 }
 if(typeof(chk)=='undefined' && flag){
  vFlag[num]=flag;
  runFlag[num]['f']=setTimeout("onBg('"+num+"','"+flag+"',1)",100);
  return true;
 }
 var m=0;
 if(!flag){
  if(typeof(vFlag[num])=='undefined'||!vFlag[num]){
    return true;
  }
  if(runFlag[num]['f']>=0){
   clearTimeout(runFlag[num]['f']);
   if(vFlag[num]!=2){
    return true;
   }
  }
  for(var i=6; i>=0; i--){
   if(runFlag[num]>=0){
    clearTimeout(runFlag[num]);
    m=i;
   }
  }
 }
 for(var e=m; e<7; e++){
  runFlag[num][e]=setTimeout("navScrollBg(" + e + "," + num +","+flag+")",40 * e);  
 }
 if(flag){
  vFlag[num]=2;
 }else{
  vFlag[num]=flag;
 }
}
</script>

</body>
</html>

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

2008-06-22 00:43:00 出处：中国设计秀cnwebshow.com

本文引用地址：http://www.cnwebshow.com/edu/html/article_4873.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板