<!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.2.6.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").get(0).getBoundingClientRect().left; var elementTop = $("li#info_" +index +" a").get(0).getBoundingClientRect().top; var textLeft = elementLeft + 24 - 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+")",80 * 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首页动画效果
猜你喜欢
转载自wf42988.iteye.com/blog/646078
今日推荐
周排行