给你的博客增加一个随页面滚动漂浮的快捷导航

流年
流年
流年
299
文章
381
评论
2015年12月3日20:10:10 评论 1,000 1564字阅读5分12秒

演示:http://www.qhx.cc/archives/227.html

图片

给你的博客增加一个随页面滚动漂浮的快捷导航

 

添加到页头或者页尾即可。

  1. <!-- 右侧导航 -->
  2. <div class="rightNav"><a style="right: -110px;" href="#><em>流</em>申请链接</a>
  3. <a style="right: -110px;" href="#"><em>年</em>给我投稿</a>
  4. <a style="right: -110px;" href="#"><em>哔</em>待选菜单</a>
  5. <a style="right: -110px;" href="#"><em>哔</em>待选菜单</a>  </div>
  6. <script type="text/javascript">// <![CDATA[
  7. var btb=$(".rightNav"); var tempS; $(".rightNav").hover(function(){ var thisObj = $(this); tempS = setTimeout(function(){ thisObj.find("a").each(function(i){ var tA=$(this); setTimeout(function(){ tA.animate({right:"0"},300);},50*i); }); },200); },function(){ if(tempS){ clearTimeout(tempS); } $(this).find("a").each(function(i){ var tA=$(this); setTimeout(function(){ tA.animate({right:"-110"},300,function(){ });},50*i); }); }); var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; if( isIE6 ){ $(window).scroll(function(){ btb.css("top", $(document).scrollTop()+85) }); }
  8. // ]]></script>
  9. <!-- 右侧导航结束 -->

CSS代码

  1. .rightNav{ position:fixedwidth:140px;  rightright:0; top:105px; _position:absolutetext-align:leftcursor:pointerbackground-image:url(about:blank);  }
  2. .rightNav a{ display:blockposition:relativeheight:30pxline-height:30pxmargin-bottom:2pxbackground:#fffpadding-right:10pxwidth:130pxoverflow:hidden;  cursor:pointerrightright:-110px; }
  3. .rightNav a:hover{ text-decoration:nonecolor:#1974A1;  }
  4. .rightNav a:hover em{ background:#00b700}
  5. .rightNav a em{ display:blockfloat:leftwidth:30pxbackground:#1974A1color:#ffffont-size:16pxtext-align:centermargin-right:10px;}

 

流年
  • 本文由 发表于 2015年12月3日20:10:10
  • 除非特殊声明,本站文章均为原创,需要转载,请留言说明!
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: