`

google首页的动画效果

GoogleCSS生活XHTML 
阅读更多
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=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>
  • 大小: 5.8 KB
分享到：
| DWR详解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    google首页动画效果

    谷歌首页的动画效果是用户体验设计中的一个重要组成部分，它在用户打开网页时提供了视觉上的吸引力和交互性。这些动画不仅增加了网站的趣味性，也优化了用户的浏览体验。下面将详细介绍谷歌首页动画效果的相关知识点...

    Google 首页动画效果代码

    本篇文章将详细解析"Google 首页动画效果代码"，帮助你理解如何通过编程实现类似的效果。 首先，我们要知道Google首页动画主要集中在小图标上，如"视频"、"图片"、"生活"等模块。这些动画通常是用JavaScript和CSS3...

    Google首页logo太极动画效果.zip

    本话题围绕“Google首页logo太极动画效果”展开，这是一个使用纯JS实现的精彩动画特效。这个项目的源代码存放在名为“jiaoben18799”的压缩文件中。 首先，我们要理解太极图的构成，它通常由阴阳鱼组成，阴阳鱼互相...

    Android地图搜索，大头针坠落动画效果，圆环动画效果

    本示例主要关注地图上的特定视觉效果，即“大头针坠落动画效果”和“圆环动画效果”。这两种动画为地图交互提供了更丰富的视觉体验，使得用户在查看地图时能够获得更加生动、直观的感受。 首先，我们来详细讨论...

    Google+ 底部进入动画效果

    Android代码, 实现了 类似 google plus布局的动画效果 ，滑动滚动条的时候，页面会从下方一个一个快速 滑入，即slide up 效果,重点在于 子视图的动画，可以对任意child view 施加动画，可以水平方向滚动，也可以垂直...

    模仿google+的列表动画效果

    在Android开发中，实现类似Google+的列表动画效果可以极大地提升用户体验，使应用看起来更加生动和专业。这种动画效果主要体现在列表项的滑入滑出、加载更多以及过渡效果等方面。下面将详细介绍如何在Android中模仿...

    Android应用源码之listview 的各种动画效果.zip

    本压缩包中的资源主要关注ListView的动画效果实现，这在增强用户体验方面起着至关重要的作用。通过对ListView添加动画，可以使其更具吸引力，提高用户的互动性和应用的趣味性。 1. **ListView基本原理** - ...

    google 的动画

    标题 "google 的动画" 暗示我们关注的是 Google 相关的动画效果，可能是 Google 页面上的某种交互或视觉展示。描述中提到“简单的 js 实现的动画”，这表明我们将探讨的是利用 JavaScript 这种客户端脚本语言创建的...

    android 动画大全 各种效果 欢迎下载

    本资源包"android 动画大全"集成了各种动画效果，适用于开发者们探索和实践，提升自己的Android应用的视觉表现力。下面我们将深入探讨Android动画的几个主要类别及其重要知识点。 1. **视图动画(View Animation)** ...

    史上最全的Android 动画效果

    在Android开发中，动画效果是提升用户体验的关键因素之一。这篇资料集合了史上最全的Android动画效果，涵盖了图片切换以及各种动态交互设计。以下是对这些关键知识点的详细解释： 1. **Android 动画效果**：Android...

    BottomNavigationView去除菜单项动画效果代码

    在设计用户界面时，我们有时需要对它的默认行为进行自定义，比如在这个场景下，我们要去除 BottomNavigationView 的菜单项动画效果，并在超过三个菜单项时展示文字。 BottomNavigationView 默认会为每个菜单项提供...

    安卓动画效果相关-MaterialTransitionsMaterial风格的过渡动画效果.rar

    在Android开发中，动画效果是提升用户体验的关键因素之一。Material Design是Google推出的一种设计语言，它为应用程序提供了统一且富有表现力的视觉风格。MaterialTransitions是实现Material Design风格过渡动画的一...

    安卓动画效果相关-Android中的material-navigation-drawer5.0侧边栏效果.rar

    在Android开发中，动画效果是提升用户体验的关键因素之一。Material Design是谷歌推出的设计语言，它为应用程序提供了统一的视觉和交互规范。Material Navigation Drawer（材料设计侧边栏）是这一设计语言的重要组成...

    安卓动画效果相关-android抽屉效果.rar

    "安卓动画效果相关-android抽屉效果.rar"这个资源包主要关注的是Android平台上的抽屉（Drawer）效果，这种效果常见于许多应用的侧滑菜单，例如Google Maps或者Facebook应用。抽屉效果通常用于隐藏和显示一个侧边栏，...

    google首页菜单动画源码

    "Google首页菜单动画源码"是一个关于谷歌搜索引擎主页菜单动态效果的编程实例。这个压缩包包含了一系列用于实现这一功能的文件，让我们逐一解析它们。 1. **homepage.css**：这是一个CSS（层叠样式表）文件，它是...

    Google粘土动画Doodle代码

    【Google粘土动画Doodle代码】是Google为了庆祝或纪念某个特殊事件或人物，而特别设计的一种互动式Logo，通常会在Google主页上展示。这些Doodles不仅富有创意，还经常包含一些趣味性的交互元素，例如这次提到的粘土...

Magicbox
Global site tag (gtag.js) - Google Analytics