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

流年
评论1,0441字数 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:fixed; width:140px;  rightright:0; top:105px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank);  }
  2. .rightNav a{ display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-right:10px; width:130px; overflow:hidden;  cursor:pointer; rightright:-110px; }
  3. .rightNav a:hover{ text-decoration:none; color:#1974A1;  }
  4. .rightNav a:hover em{ background:#00b700}
  5. .rightNav a em{ display:block; float:left; width:30px; background:#1974A1; color:#fff; font-size:16px; text-align:center; margin-right:10px;}

 

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

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定