google首页动画效果

最新推荐文章于 2024-08-08 20:50:56 发布
daerduochen
最新推荐文章于 2024-08-08 20:50:56 发布
阅读量109
点赞数
文章标签： Google CSS jQuery JavaScript 生活 ViewUI
<!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>
<script type="text/javascript" src="script/jquery-1.3.min.js"></script>
<style type="text/css">
*{padding:0;margin:0;}
body{text-align:center;font-size:12px;padding-top:50px;}
#nav{margin:0 auto;width:440px;clear:both;overflow:hidden;padding-left:15px;}
#nav li{padding:15px 0;width:52px;float:left;text-align:center;margin-right:10px;list-style:none;}
#nav li a{display:block;cursor:pointer;color:#333;text-decoration:none;}
#nav li a span{background:url(images/google_icons.jpg) no-repeat;display:block;width:52px;height:37px;margin-bottom:15px;}
#nav li a:hover{text-decoration:underline;}

#nav li#info_1 a:hover{color:#54a70d;}
#nav li#info_2 a:hover{color:#3c78e6;}
#nav li#info_3 a:hover{color:#96cfec;}
#nav li#info_4 a:hover{color:#e8d50f;}
#nav li#info_5 a:hover{color:#ea4f4b;}
#nav li#info_6 a:hover{color:#54a70d;}
#nav li#info_7 a:hover{color:#da3a08;}

#nav li#info_1 a span{background-position:0 0;}
#nav li#info_2 a span{background-position:0 -37px;}
#nav li#info_3 a span{background-position:0 -74px;}
#nav li#info_4 a span{background-position:0 -111px;}
#nav li#info_5 a span{background-position:0 -148px;}
#nav li#info_6 a span{background-position:0 -185px;}
#nav li#info_7 a span{background-position:0 -223px;}

div.text{text-align:center;position:absolute;left:0;top:0;cursor:pointer;display:none;}
div.text div.border{white-space:nowrap;padding:2px;line-height:14px;display:block;_padding-top:4px;}
div.text div.leftright{height:1px;overflow:hidden;clear:both;}
div.text div.leftright .left{width:1px;height:1px;float:left;}
div.text div.leftright .right{width:1px;height:1px;float:right;}
div.text div.topline{margin:0 1px;height:1px;overflow:hidden;}
div.text div.arrow{background:url(images/google_icons.jpg) no-repeat -260px 0;width:8px;height:4px;margin:0 auto;position:relative;top:-1px;overflow:hidden;}

div.text1 div.border{border-left:1px solid #54a70d;border-right:1px solid #54a70d;}
div.text1 div.leftright .left{background-color:#54a70d;}
div.text1 div.leftright .right{background-color:#54a70d;}
div.text1 div.topline{background-color:#54a70d;}
div.text1 div.arrow{background-position:-260px 0;}

div.text2 div.border{border-left:1px solid #3c78e6;border-right:1px solid #3c78e6;}
div.text2 div.leftright .left{background-color:#3c78e6;}
div.text2 div.leftright .right{background-color:#3c78e6;}
div.text2 div.topline{background-color:#3c78e6;}
div.text2 div.arrow{background-position:-260px -37px;}

div.text3 div.border{border-left:1px solid #96cfec;border-right:1px solid #96cfec;}
div.text3 div.leftright .left{background-color:#96cfec;}
div.text3 div.leftright .right{background-color:#96cfec;}
div.text3 div.topline{background-color:#96cfec;}
div.text3 div.arrow{background-position:-260px -74px;}

div.text4 div.border{border-left:1px solid #e8d50f;border-right:1px solid #e8d50f;}
div.text4 div.leftright .left{background-color:#e8d50f;}
div.text4 div.leftright .right{background-color:#e8d50f;}
div.text4 div.topline{background-color:#e8d50f;}
div.text4 div.arrow{background-position:-260px -111px;}

div.text5 div.border{border-left:1px solid #ea4f4b;border-right:1px solid #ea4f4b;}
div.text5 div.leftright .left{background-color:#ea4f4b;}
div.text5 div.leftright .right{background-color:#ea4f4b;}
div.text5 div.topline{background-color:#ea4f4b;}
div.text5 div.arrow{background-position:-260px -148px;}

div.text6 div.border{border-left:1px solid #54a70d;border-right:1px solid #54a70d;}
div.text6 div.leftright .left{background-color:#54a70d;}
div.text6 div.leftright .right{background-color:#54a70d;}
div.text6 div.topline{background-color:#54a70d;}
div.text6 div.arrow{background-position:-260px -185px;}

div.text7 div.border{border-left:1px solid #da3a08;border-right:1px solid #da3a08;}
div.text7 div.leftright .left{background-color:#da3a08;}
div.text7 div.leftright .right{background-color:#da3a08;}
div.text7 div.topline{background-color:#da3a08;}
div.text7 div.arrow{background-position:-260px -222px;}
</style>
<script language="javascript">	
	$(document).ready(function(){
		$("ul li a").each(function(index){		
			$(this).hover(function(){				
				onBg(index+1,0);
				onText(index+1);
			},
			function(){				
				onBg(index+1,1);
				$("div.text"+(index+1)).hide();
			});		
		});
	});

	function onText(index){
		var textWidth = $("div.text"+index).show().find("span").width() + 14;
		$("div.text"+index).width(textWidth);
		var elementLeft = $("li#info_" +index +" a").offset().left;
		var elementTop = $("li#info_" +index +" a").offset().top;
		var textLeft = elementLeft + 26 - parseInt(textWidth) / 2;
		var textTop = elementTop - 32;
		$("div.text"+index).css({"left":textLeft+"px","top":textTop+"px"});
	}
	
	function navScrollBg(i,index,flag) {
		var a=[0,52,104,156,208];	
		var spans = $("#info_" + index).find("span");
		if(flag == 0){
			spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");			
		}
		else{
			a.sort(function(b,c){return c-b;});			
			spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");
		}
	}
	function onBg(index,flag){
		for(var i=0; i<5; i++){
			setTimeout("navScrollBg(" + i + "," + index +","+flag+")",40 * i);  
		}
	}
</script>
</head>
<body>
<div class="text text1">
	<div class="topline"></div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="border">
		<span>搜索热门网络视频</span>
	</div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="topline"></div>
	<div class="arrow"></div>
</div>

<div class="text text2">
	<div class="topline"></div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="border">
		<span>搜索全球的图片</span>
	</div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="topline"></div>
	<div class="arrow"></div>
</div>

<div class="text text3">
	<div class="topline"></div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="border">
		<span>搜索您身边的分类生活信息</span>
	</div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="topline"></div>
	<div class="arrow"></div>
</div>

<div class="text text4">
	<div class="topline"></div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="border">
		<span>查询地址、捜索周边和规划路线</span>
	</div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="topline"></div>
	<div class="arrow"></div>
</div>

<div class="text text5">
	<div class="topline"></div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="border">
		<span>商业信息、财经新闻、实时股价和动态图表</span>
	</div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="topline"></div>
	<div class="arrow"></div>
</div>

<div class="text text6">
	<div class="topline"></div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="border">
		<span>在线翻译外文段落、网页、搜索结果</span>
	</div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="topline"></div>
	<div class="arrow"></div>
</div>

<div class="text text7">
	<div class="topline"></div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="border">
		<span>网址大全，快速直达常用网站</span>
	</div>
	<div class="leftright">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="topline"></div>
	<div class="arrow"></div>
</div>

<ul id="nav">
	<li id="info_1"><a href=""><span></span>视频</a></li>
	<li id="info_2"><a href=""><span></span>图片</a></li>
	<li id="info_3"><a href=""><span></span>生活</a></li>
	<li id="info_4"><a href=""><span></span>地图</a></li>
	<li id="info_5"><a href=""><span></span>财经</a></li>
	<li id="info_6"><a href=""><span></span>翻译</a></li>
	<li id="info_7"><a href=""><span></span>网站导航</a></li>
</ul>
</body>
</html>
daerduochen
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google首页动画效果

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;
复制链接

扫一扫