教程网站右下角隐藏栏目特效代码，仅供参考。
<style type="text/css">
/*首页右侧快速导航栏*/
.rightNav{position:fixed; width:140px; right:0; top:180px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank);}
.rightNav a{display:block; position:relative; height:30px; line-height:30px; font-family: "微软雅黑";margin-bottom:2px; background:#fff; padding-right:10px; width:130px; overflow:hidden; cursor:pointer; right:-110px;}
.rightNav a:hover{text-decoration:none; color:#39A4DC;}
.rightNav a:hover em{background:#00b700}
.rightNav a em{display:block; float:left; width:30px; background:#39A4DC; color:#fff; font-size:16px; text-align:center; margin-right:10px;}
.rightNav a.new em{background:#f60;}
.demoBox .iframeWrap{width:452px;}
.demoBox .iframeWrap iframe{width:452px; height:232px; background:url(../images/loading.gif) center center no-repeat;}
</style>
<div class="rightNav">
<a href="http://www.woaiyl.com" target="_blank" title="易语言源码" style="right:-110px;"><em>1</em>易语言源码</a> <a href="http://www.woaiyl.com" target="_blank" title="黑页源码" style="right:-110px;"><em>2</em>黑页源码</a> <a href="http://www.woaiyl.com" target="_blank" title="技术福利" style="right:-110px;"><em>3</em>技术福利</a> <a href="http://www.woaiyl.com" target="_blank" title="CF辅助" style="right:-110px;"><em>4</em>CF辅助</a> <a href="http://www.woaiyl.com" target="_blank" title="头像源码" style="right:-110px;"><em>5</em>头像源码</a> <a href="http://www.woaiyl.com" target="_self" title="网站源码" style="right:-110px;"><em>6</em>网站源码</a> <a href="http://www.woaiyl.com" target="_self" title="值得一看" style="right:-110px;"><em>7</em>值得一看</a> <a href="http://www.woaiyl.com" target="_self" title="福利网盘" style="right:-110px;"><em>8</em>福利网盘</a> <a href="http://www.woaiyl.com" target="_self" title="网络骗子揭露" style="right:-110px;"><em>9</em>网络骗子揭露</a> <a href="http://www.woaiyl.com" target="_self" title="好玩的网站代码" style="right:-110px;"><em>10</em>好玩的网站代码</a> <a href="http://www.woaiyl.com" target="_self" title="活动仓库" style="right:-110px;"><em>11</em>活动仓库</a> <a href="http://www.woaiyl.com/" target="_self" title="其他福利" style="right:-110px;"><em>12</em>其他福利</a> <a href="http://www.woaiyl.com/gonggao/1858.html" target="_self" title="招收投稿作者" style="right:-110px;"><em>13</em>招收投稿作者</a>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//右侧导航
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"},200);},50*i);
});
},200);
},function(){
if(tempS){ clearTimeout(tempS); }
$(this).find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({right:"-110"},200,function(){
});},50*i);
});
});
</script>
评论