google首页的动画效果
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>