流年
评论1,4871字数 296阅读0分59秒
演示：http://www.qhx.cc/archives/227.html
图片
添加到页头或者页尾即可。
- <!-- 右侧导航 -->
- <div class="rightNav"><a style="right: -110px;" href="#><em>流</em>申请链接</a>
- <a style="right: -110px;" href="#"><em>年</em>给我投稿</a>
- <a style="right: -110px;" href="#"><em>哔</em>待选菜单</a>
- <a style="right: -110px;" href="#"><em>哔</em>待选菜单</a> </div>
- <script type="text/javascript">// <![CDATA[
- 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) }); }
- // ]]></script>
- <!-- 右侧导航结束 -->
CSS代码
- .rightNav{ position:fixed; width:140px; rightright:0; top:105px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank); }
- .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; }
- .rightNav a:hover{ text-decoration:none; color:#1974A1; }
- .rightNav a:hover em{ background:#00b700}
- .rightNav a em{ display:block; float:left; width:30px; background:#1974A1; color:#fff; font-size:16px; text-align:center; margin-right:10px;}
