js+css实现苹果机os系统导航条-JS特效-爱易网页

js+css实现苹果机os系统导航条

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

以下是程序代码

<!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" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>js+css实现苹果机OS系统导航条，sky整理收集，站长特效欢迎您。</title>
<script type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7(1D 1u.6=="R"){1u.R=1u.R;v 6=q(a,c){7(1u==l)u 1q 6(a,c);a=a||12;7(6.1p(a))u 1q 6(12)[6.D.27?"27":"2P"](a);7(1D a=="20"){v m=/^[^<]*(<(.|\\s)+>)[^>]*$/.2M(a);7(m)a=6.41([m[1]]);I u 1q 6(c).2p(a)}u l.6p(a.1l==2A&&a||(a.3W||a.H&&a!=1u&&!a.1W&&a[0]!=R&&a[0].1W)&&6.3N(a)||[a])};7(1D $!="R")6.30$=$;v $=6;6.D=6.8n={3W:"1.1.2",8K:q(){u l.H},H:0,2b:q(1P){u 1P==R?6.3N(l):l[1P]},2j:q(a){v K=6(a);K.6n=l;u K},6p:q(a){l.H=0;[].1m.15(l,a);u l},J:q(D,1A){u 6.J(l,D,1A)},2g:q(1b){v 4W=-1;l.J(q(i){7(l==1b)4W=i});u 4W},1G:q(23,O,B){v 1b=23;7(23.1l==3t)7(O==R)u l.H&&6[B||"1G"](l[0],23)||R;I{1b={};1b[23]=O}u l.J(q(2g){P(v G 1B 1b)6.1G(B?l.1o:l,G,6.G(l,1b[G],B,2g,G))})},1n:q(23,O){u l.1G(23,O,"3g")},2I:q(e){7(1D e=="20")u l.3u().3s(12.8q(e));v t="";6.J(e||l,q(){6.J(l.3b,q(){7(l.1W!=8)t+=l.1W!=1?l.6u:6.D.2I([l])})});u t},2H:q(){v a=6.41(1v);u l.J(q(){v b=a[0].3j(U);l.Y.2T(b,l);1Y(b.1a)b=b.1a;b.4A(l)})},3s:q(){u l.3d(1v,U,1,q(a){l.4A(a)})},5j:q(){u l.3d(1v,U,-1,q(a){l.2T(a,l.1a)})},5k:q(){u l.3d(1v,11,1,q(a){l.Y.2T(a,l)})},5u:q(){u l.3d(1v,11,-1,q(a){l.Y.2T(a,l.2c)})},4f:q(){u l.6n||6([])},2p:q(t){u l.2j(6.2Y(l,q(a){u 6.2p(t,a)}),t)},4Y:q(4M){u l.2j(6.2Y(l,q(a){v a=a.3j(4M!=R?4M:U);a.$1E=14;u a}))},1C:q(t){u l.2j(6.1p(t)&&6.2n(l,q(2u,2g){u t.15(2u,[2g])})||6.3z(t,l))},2e:q(t){u l.2j(t.1l==3t&&6.3z(t,l,U)||6.2n(l,q(a){u(t.1l==2A||t.3W)?6.3y(a,t)<0:a!=t}))},1K:q(t){u l.2j(6.2m(l.2b(),t.1l==3t?6(t).2b():t.H!=R&&(!t.1e||t.1e=="8s")?t:[t]))},4k:q(1s){u 1s?6.1C(1s,l).r.H>0:11},19:q(19){u 19==R?(l.H?l[0].O:14):l.1G("O",19)},4T:q(19){u 19==R?(l.H?l[0].2G:14):l.3u().3s(19)},3d:q(1A,1N,3Y,D){v 4Y=l.H>1;v a=6.41(1A);7(3Y<0)a.8t();u l.J(q(){v 1b=l;7(1N&&6.1e(l,"1N")&&6.1e(a[0],"3m"))1b=l.5K("1X")[0]||l.4A(12.56("1X"));6.J(a,q(){D.15(1b,[4Y?l.3j(U):l])})})}};6.1w=6.D.1w=q(){v 1T=1v[0],a=1;7(1v.H==1){1T=l;a=0}v G;1Y(G=1v[a++])P(v i 1B G)1T[i]=G[i];u 1T};6.1w({8u:q(){7(6.30$)$=6.30$;u 6},1p:q(D){u!!D&&1D D!="20"&&!D.1e&&1D D[0]=="R"&&/q/i.1j(D+"")},4C:q(C){u C.60&&C.5J&&!C.5J.63},1e:q(C,W){u C.1e&&C.1e.3K()==W.3K()},J:q(1b,D,1A){7(1b.H==R)P(v i 1B 1b)D.15(1b[i],1A||[i,1b[i]]);I P(v i=0,6q=1b.H;i<6q;i++)7(D.15(1b[i],1A||[i,1b[i]])===11)3M;u 1b},G:q(C,O,B,2g,G){7(6.1p(O))O=O.3n(C,[2g]);v 5G=/z-?2g|8x-?8y|1c|58|8z-?26/i;u O&&O.1l==3J&&B=="3g"&&!5G.1j(G)?O+"4R":O},18:{1K:q(C,c){6.J(c.3o(/\\s+/),q(i,N){7(!6.18.2Q(C.18,N))C.18+=(C.18?" ":"")+N})},2d:q(C,c){C.18=c?6.2n(C.18.3o(/\\s+/),q(N){u!6.18.2Q(c,N)}).6r(" "):""},2Q:q(t,c){t=t.18||t;c=c.1S(/([\\.\\\\\\+\\*\\?\\[\\^\\]\\$\$\$\\{\\}\\=\\!\\<\\>\\|\\:])/g,"\\\\$1");u t&&1q 4u("(^|\\\\s)"+c+"(\\\\s|$)").1j(t)}},4c:q(e,o,f){P(v i 1B o){e.1o["1L"+i]=e.1o[i];e.1o[i]=o[i]}f.15(e,[]);P(v i 1B o)e.1o[i]=e.1o["1L"+i]},1n:q(e,p){7(p=="26"||p=="3Q"){v 1L={},44,3I,d=["8A","8B","8C","8D"];6.J(d,q(){1L["8E"+l]=0;1L["8F"+l+"8G"]=0});6.4c(e,1L,q(){7(6.1n(e,"1h")!="1V"){44=</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="105">下一篇：css制作左侧三级导航菜单</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/34433' title='网易微博将正式关闭 用户迁至轻博客LOFTER' target="_blank">
                        网易微博将正式关闭 用户迁至轻博客LOFTER</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34158' title='黑莓高管：黑莓能作为家“小众公司”活下来' target="_blank">
                        黑莓高管：黑莓能作为家“小众公司”活下来</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34436' title='华为、小米和联想在中国手机市场上演“三国杀”' target="_blank">
                        华为、小米和联想在中国手机市场上演“三国杀”</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34214' title='百度对糯米来说到底意味着什么？' target="_blank">
                        百度对糯米来说到底意味着什么？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34317' title='中移动“重启”自有品牌手机成败难料' target="_blank">
                        中移动“重启”自有品牌手机成败难料</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34278' title='揭秘：阿里巴巴“无人认领”的三成股权都归谁' target="_blank">
                        揭秘：阿里巴巴“无人认领”的三成股权都归谁</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34236' title='马斯克的特斯拉能否保持好势头' target="_blank">
                        马斯克的特斯拉能否保持好势头</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16169' title='网友爆料称微软雇水军宣传主机Xbox One' target="_blank">
                        网友爆料称微软雇水军宣传主机Xbox One</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6916' title='第二梯队也PK：当1号店“遇上”京东手机节' target="_blank">
                        第二梯队也PK：当1号店“遇上”京东手机节</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-2026 爱易网页 当前在线：366人　
        网站在9时47分6秒内访问总人数：101901人
    当前 13.63%
　<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>