<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>依次弹出和收回的右侧隐藏菜单jquery代码实现_我爱模板 www.5imoban.net</title>
<!--引入开始-->
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<!--引入结束-->
<style>
body {
margin:0;
padding:0;
color:#333;
font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif;
text-align:center;
background:#DCDCDC;
}
a {
color:#333;
text-decoration:none;
outline:none;
}
a:hover {
color:#f00;
text-decoration:underline;
}
.rightNav{
position:fixed;
width:140px;
right:0;
top:100px;
_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;
right:-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;
}
</style>
</head>
<body>
<!--代码开始-->
<div class="rightNav">
<a href="http://www.5imoban.net" style="right: -110px;"><em>0</em>站长素材</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>1</em>书签切换</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>2</em>幻灯片</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>3</em>图片滚动-左</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>4</em>图片滚动-上</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>5</em>图片无缝滚动-左</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>6</em>图片无缝滚动-上</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>7</em>文字滚动-左</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>8</em>文字滚动-上</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>9</em>文字无缝滚动-左</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>10</em>文字无缝滚动-上</a>
<a href="http://www.5imoban.net" style="right: -110px;"><em>11</em>其它基础效果</a>
</div>
<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"},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()+100) }); }
</script>
<!--代码结束-->
</body>
</html>