<!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>
分享到：
相关推荐
本篇文章将详细解析"Google 首页动画效果代码"，帮助你理解如何通过编程实现类似的效果。 首先，我们要知道Google首页动画主要集中在小图标上，如"视频"、"图片"、"生活"等模块。这些动画通常是用JavaScript和CSS3...
标题中的“google首页的动画效果”指的是Google搜索引擎首页上的Doodle（涂鸦）动画，这是一种交互式的、富有创意的设计元素，通常用来纪念重要的日子、人物或事件。这些动画不仅仅是静态的图片，而是通过JavaScript...
本话题围绕“Google首页logo太极动画效果”展开，这是一个使用纯JS实现的精彩动画特效。这个项目的源代码存放在名为“jiaoben18799”的压缩文件中。 首先，我们要理解太极图的构成，它通常由阴阳鱼组成，阴阳鱼互相...
本示例主要关注地图上的特定视觉效果，即“大头针坠落动画效果”和“圆环动画效果”。这两种动画为地图交互提供了更丰富的视觉体验，使得用户在查看地图时能够获得更加生动、直观的感受。 首先，我们来详细讨论...
Android代码, 实现了 类似 google plus布局的动画效果 ，滑动滚动条的时候，页面会从下方一个一个快速 滑入，即slide up 效果,重点在于 子视图的动画，可以对任意child view 施加动画，可以水平方向滚动，也可以垂直...
在Android开发中，实现类似Google+的列表动画效果可以极大地提升用户体验，使应用看起来更加生动和专业。这种动画效果主要体现在列表项的滑入滑出、加载更多以及过渡效果等方面。下面将详细介绍如何在Android中模仿...
本压缩包中的资源主要关注ListView的动画效果实现，这在增强用户体验方面起着至关重要的作用。通过对ListView添加动画，可以使其更具吸引力，提高用户的互动性和应用的趣味性。 1. **ListView基本原理** - ...
标题 "google 的动画" 暗示我们关注的是 Google 相关的动画效果，可能是 Google 页面上的某种交互或视觉展示。描述中提到“简单的 js 实现的动画”，这表明我们将探讨的是利用 JavaScript 这种客户端脚本语言创建的...
本资源包"android 动画大全"集成了各种动画效果，适用于开发者们探索和实践，提升自己的Android应用的视觉表现力。下面我们将深入探讨Android动画的几个主要类别及其重要知识点。 1. **视图动画(View Animation)** ...
在Android开发中，动画效果是提升用户体验的关键因素之一。这篇资料集合了史上最全的Android动画效果，涵盖了图片切换以及各种动态交互设计。以下是对这些关键知识点的详细解释： 1. **Android 动画效果**：Android...
在Android开发中，动画效果是提升用户体验的关键因素之一。Material Design是Google推出的一种设计语言，它为应用程序提供了统一且富有表现力的视觉风格。MaterialTransitions是实现Material Design风格过渡动画的一...
在设计用户界面时，我们有时需要对它的默认行为进行自定义，比如在这个场景下，我们要去除 BottomNavigationView 的菜单项动画效果，并在超过三个菜单项时展示文字。 BottomNavigationView 默认会为每个菜单项提供...
在Android开发中，动画效果是提升用户体验的关键因素之一。Material Design是谷歌推出的设计语言，它为应用程序提供了统一的视觉和交互规范。Material Navigation Drawer（材料设计侧边栏）是这一设计语言的重要组成...
"安卓动画效果相关-android抽屉效果.rar"这个资源包主要关注的是Android平台上的抽屉（Drawer）效果，这种效果常见于许多应用的侧滑菜单，例如Google Maps或者Facebook应用。抽屉效果通常用于隐藏和显示一个侧边栏，...
"Google首页菜单动画源码"是一个关于谷歌搜索引擎主页菜单动态效果的编程实例。这个压缩包包含了一系列用于实现这一功能的文件，让我们逐一解析它们。 1. **homepage.css**：这是一个CSS（层叠样式表）文件，它是...
【Google粘土动画Doodle代码】是Google为了庆祝或纪念某个特殊事件或人物，而特别设计的一种互动式Logo，通常会在Google主页上展示。这些Doodles不仅富有创意，还经常包含一些趣味性的交互元素，例如这次提到的粘土...