用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

IBM中文官方网站导航条渐隐特效代码

2014-10-29 作者: js特效源码下载举报

[javascript]代码库

<textarea rows=&quot;8&quot; id=&quot;CodeText17468&quot; class=&quot;UBBText&quot;><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
<html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
<title>IBM官网导航条效果</title>
<style>
body,div,ul,li{margin:0;padding:0;}
body{height:2000px;background:#F0F0F0;}
li{list-style:none;}
a:link,a:visited{outline:none;text-decoration:none;}
#wrap{width:100%;position:fixed;top:0;}
#topBar{color:#7A7A7A;height:28px;background:#131623;overflow:hidden;font:12px/28px Arial;text-align:center;}
#topBar a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;}
#nav{height:50px;overflow:hidden;border-top:1px solid #999;border-bottom::1px solid #666;background:#000 url(http://www.alixixi.com/web/UploadPic/2011-12/2011122131216590.png) repeat-x;}
#nav .logo{float:left;margin:0 20px;}
#nav .logo a{float:left;width:100px;height:50px;overflow:hidden;text-indent:-9999px;background:url(http://www.alixixi.com/web/UploadPic/2011-12/2011122131214364.png) no-repeat;}
#nav .logo a:hover{background-position:0 -50px;}
#nav.hide .logo a{width:100px;height:30px;background-position:0 -100px;_background-position:0 -130px;}
#nav.hide .logo a:hover{background-position:0 -130px;}
#nav ul,#nav ul li{float:left;}
#nav ul li a{float:left;color:#CCC;height:50px;font:16px/50px Arial;padding:0 20px;}
#nav ul li a:hover{color:#FFF;background:url(http://www.alixixi.com/web/UploadPic/2011-12/2011122131216590.png) 0 -50px repeat-x;}
#nav.hide ul{display:none;}
</style>
<script>
var fgm = {
 shit: !-[1,] && !window.XMLHttpRequest, 
 scrollTop: function() {
  return document.documentElement.scrollTop || document.body.scrollTop;
 },
 currentStyle: function(obj, attr) {
  return parseInt(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]);
 },
 fixed: function(element) {
  if(this.shit) {
   var top = this.currentStyle(element, &quot;top&quot;) || 0,
   dd = &quot;(document.documentElement)&quot;;
   document.documentElement.style.textOverflow = &quot;ellipsis&quot;;
   element.style.position = &quot;absolute&quot;;
   element.style.setExpression(&quot;top&quot;, &quot;eval(&quot; + dd + &quot;.scrollTop + &quot; + (top - this.scrollTop()) + ') + &quot;px&quot;');
  }
  else {
   element.style.position = &quot;fixed&quot;; 
  }
 },
 doMove: function(obj, iTarget, callback) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
   var iCur = fgm.currentStyle(obj, &quot;height&quot;),
   iSpeed = (iTarget - iCur) / 5;
   iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
   iTarget == iCur ? (clearInterval(obj.timer), callback && callback.call(obj)) : obj.style.height = iSpeed + iCur + &quot;px&quot;;
  }, 30);  
 }
};
window.onload = function() {
 var oWrap = document.getElementById(&quot;wrap&quot;),
 oTopBar = document.getElementById(&quot;topBar&quot;),
 oNav = document.getElementById(&quot;nav&quot;),
 fnStatus = function(status) {
  !!status ?
  (function() {
   oNav.className = &quot;hide&quot;;
   fgm.doMove(oTopBar, 4);
   fgm.doMove(oNav, 30);
  })() :
  (function() {
   fgm.doMove(oTopBar, 28);
   fgm.doMove(oNav, 50, function() {
    this.className = &quot;&quot; ;
   })
  })();
 }; 
 fgm.fixed(oWrap);//IE6 Fixed
 window.onscroll = function() {
  var iScrollTop = fgm.scrollTop();
  fnStatus(iScrollTop > 0);
  document.onmouseover = function(ev) {
   var oEv = ev || event,
   oTarget = oEv.target || oEv.srcElement,
   contains = function() {
    if(oWrap.contains) {
     return oWrap.contains(oTarget); 
    }
    else if(oWrap.compareDocumentPosition) {
     return !!(oWrap.compareDocumentPosition(oTarget) & 16);
    }
   }();
   fnStatus(!contains && iScrollTop > 0);
  };
 };
 window.onscroll();
};
</script>
</head>
<body>
<div id=&quot;wrap&quot;>
    <div id=&quot;topBar&quot;>网页特效提示:用鼠标下拉滚动条查看导航效果,特效转载请注明出处 <a href=&quot;http://js.alixixi.com&quot;>js.alixixi.com</a> 网页特效频道</div>
    <!--/topBar-->
    <div id=&quot;nav&quot;>
        <div class=&quot;logo&quot;><a href=&quot;javascript:;&quot;>IBM</a></div>
        <ul>
            <li><a href=&quot;javascript:;&quot;>解决方案</a></li>
            <li><a href=&quot;javascript:;&quot;>服务</a></li>
            <li><a href=&quot;javascript:;&quot;>产品</a></li>
            <li><a href=&quot;javascript:;&quot;>支持与下载</a></li>
            <li><a href=&quot;javascript:;&quot;>个性化服务</a></li>
        </ul>
    </div>
    <!--/nav-->
</div>
<!--/wrap-->
</body>
</html>


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...