最新google首页的超酷导航效果-JS特效-爱易网页

最新google首页的超酷导航效果

日期：2014-05-18　浏览次数：20144 次

google首页最新改版了,导航非常的酷,跟FLASH有得一比····
起初以为是Flash呢.细仔看一下,鼠标右击才发现竟然是HTML代码.就想想把它的代码扒下来,分享如下:

以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Google导航代码 by aiyiweb.com</TITLE>
<META http-equiv=content-type content="text/html; charset=UTF-8">
<SCRIPT>
window.google={kEI:"HBnlR8bgAorksALn3dTbBw",kEXPI:"17259,17735,18065",kHL:"zh-CN"};
function sf(){document.f.q.focus()}
window.clk=function(b,c,d,e,f,g){if(document.images){var a=encodeURIComponent||escape;(new Image).src="/url?sa=T"+(c?"&oi="+a(c):"")+(d?"&cad="+a(d):"")+"&ct="+a(e)+"&cd="+a(f)+(b?"&url="+a(b.replace(/#.*/,"")).replace(/\+/g,"%2B"):"")+"&ei=HBnlR8bgAorksALn3dTbBw"+g}return true};
window.gbar={};(function(){var b=window.gbar,c,g,h;function n(d,f,e){d.visibility=h?"hidden":"visible";d.left=f+"px";d.top=e+"px"}b.tg=function(d){var f=0,e=0,a,i=0,o,l=window.navExtra,m,j=document,k=0;g=g||j.getElementById("gbar").getElementsByTagName("span");(d||window.event).cancelBubble=!i;if(!c){c=j.createElement(Array.every||window.createPopup?"iframe":"DIV");c.frameBorder="0";c.scrolling="no";c.src="#";g[7].parentNode.appendChild(c).id="gbi";if(l&&g[7])for(o in l){m=j.createElement("span");m.appendChild(l[o]);g[7].parentNode.insertBefore(m,g[7]).className="gb2"}j.onclick=b.close}while(a=g[++i]){if(e){n(a.style,e+1,f+25);k=Math.max(k,a.firstChild.tagName=="A"&&a.offsetWidth);f+=a.firstChild.tagName=="DIV"?9:20}if(a.className=="gb3"){do e+=a.offsetLeft;while(a=a.offsetParent)}}{i=0;while(a=g[++i])if(a.className=="gb2")a.style.width=k+"px";c.style.width=k+"px"}c.style.height=f+"px";n(c.style,e,24);h=!h};b.close=function(d){h&&b.tg(d)}})();
(function(){
function g(a,b,c){var d="on"+b;if(a.addEventListener){a.addEventListener(b,c,false)}else if(a.attachEvent){a.attachEvent(d,c)}else{var e=a[d];a[d]=function(){var f=e.apply(this,arguments),h=c.apply(this,arguments);return f==undefined?h:(h==undefined?f:h&&f)}}};var aa,i,j,l,n="",o,p=null,q=null,r=null,s=-1,t,u,v,w,x=null,y=null,z,A,ba={},B=null,C,F=0,G=0,H=0,I=null,J,K=false,L=false,M,N;{var ca=navigator.userAgent.toLowerCase();M=ca.indexOf("opera")!=-1;N=ca.indexOf("msie")!=-1&&!M}var O=null,da=new RegExp("^[\\s\\u1100-\\u11FF\\u3040-\\u30FF\\u3130-\\u318F\\u31F0-\\u31FF\\u3400-\\u4DBF\\u4E00-\\u9FFF\\uAC00-\\uD7A3\\uF900-\\uFAFF\\uFF65-\\uFFDC]+$"),P="google-ac-",ea=true;function fa(a,b,c,d,e,f,h,m){t=a;u=b;aa=d;O=e;ea=f;if(ga()==null){return}var k=window.google.kHL;
J=/^(zh-(CN|TW)|ja|ko)$/.test(k);if(c=="search")c="";C="/complete/search?hl="+k+(c?"&ds="+c:"")+(m?"&pq="+ha(m):"")+(h?"&expid="+h:"")+"&client=suggest";t.onsubmit=ia;u.setAttribute("autocomplete","off");g(u,"blur",ja);g(u,"beforedeactivate",ka);if(u.addEventListener){u.onkeypress=la;u.onkeyup=na}else{g(u,N?"keydown":"keypress",la);g(u,"keyup",na)}j=(l=(i=u.value));o=oa(u);v=document.createElement("table");v.id="completeTable";v.cellSpacing=(v.cellPadding="0");w=v.style;v.className=P+"m";Q();document.body.appendChild(v);
if(N){x=document.createElement("iframe");y=x.style;x.id="completeIFrame";y.zIndex="1";y.position="absolute";y.display="block";y.borderWidth=0;document.body.appendChild(x)}R();pa("",[],[]);qa();g(window,"resize",R);g(window,"pageshow",ra);if(J)window.setInterval(sa,10);z=ta("aq","f",false);A=ta("oq","",true);S()}function ra(a){if(a.persisted)z.value="f";A.valu</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="348">下一篇：导航标签位于左侧的纵向选项卡</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34458' title='2018年阿里云双11活动如何参加？1折优惠大攻略' target="_blank">
                        2018年阿里云双11活动如何参加？1折优惠大攻略</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34360' title='华为美国推出电商网站 发售Mate 2LTE版' target="_blank">
                        华为美国推出电商网站 发售Mate 2LTE版</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34404' title='中国移动承诺再降4G资费 网络漫游至50个国家' target="_blank">
                        中国移动承诺再降4G资费 网络漫游至50个国家</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34102' title='中国雅虎邮箱今日关停 由盛及衰的背后' target="_blank">
                        中国雅虎邮箱今日关停 由盛及衰的背后</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34249' title='美剧讲硅谷创业者：远不及现实荒诞？' target="_blank">
                        美剧讲硅谷创业者：远不及现实荒诞？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34335' title='杨元庆去年总薪酬1.33亿元' target="_blank">
                        杨元庆去年总薪酬1.33亿元</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16156' title='网曝富士康“二连跳” 疑因推静音模式' target="_blank">
                        网曝富士康“二连跳” 疑因推静音模式</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10840' title='优酷土豆兼并一年：依然处于烧钱形状' target="_blank">
                        优酷土豆兼并一年：依然处于烧钱形状</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10822' title='360涉足搜索范围 百度市场份额面临应战' target="_blank">
                        360涉足搜索范围 百度市场份额面临应战</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2025 爱易网页 当前在线：275人　
        网站在6时22分16秒内访问总人数：81936人
    当前 20.58%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>