<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>例子</title>
<style>
html,body{
overflow:hidden;
}
#help{
position:absolute;
right:-80px;
top:50%;
80px;
height:100px;
cursor:pointer;
margin-top:-50px;
font:12px/1.5 arial;
background-color:#CCC;
}
#help span{
position:absolute;
left:-20px;
20px;
height:86px;
padding-top:14px;
text-align:center;
background-color:red;
}
</style>
<script>
window.onload = function() {
var oHelp = document.getElementById('help');
oHelp.onmouseover = oHelp.onmouseout = function(e) {
var iTarget = (e || event).type == 'mouseout' ? -this.offsetWidth : 0;
clearInterval(this.timer);
this.timer = setInterval(function() {
var iRight = parseInt(oHelp.currentStyle ? oHelp.currentStyle['right'] : getComputedStyle(oHelp, null)['right']);
iSpeed = (iTarget - iRight) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
iRight == iTarget ? clearInterval(oHelp.timer) : (oHelp.style.right = iRight + iSpeed + 'px');
}, 30);
};
};
</script>
</head>
<body>
<div id="help"><span>新手帮助</span></div>
</body>
</html>
<!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>无标题文档</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".rsection").hover(function(){
$(this).stop(true,false).animate({right:"0px"},300);
},function(){
$(this).stop(true,false).animate({right:"-90px"},300);
});
});
</script>
<style type="text/css">
*{padding:0px;margin:0px;}
ol,ul{ list-style:none;}
body{font:12px/1.5 Arial, Helvetica, sans-serif;}
.rsection{110px;position:fixed; top:300px; right:-90px;border:1px solid #d9d9d9}
.r_l{padding:8px 0px;20px; background:#CCC; text-align:center;float:left; cursor:default;}
.r_r{float:right; line-height:28px; text-align:left;90px; text-indent:2em;}
.r_r ul li{ border-bottom:1px solid #d9d9d9;}
</style>
</head>
<body>
<div class="rsection">
<div class="r_l">新版帮助</div>
<div class="r_r">
<ul>
<li><a href="#">新手上路</a></li>
<li><a href="#">精彩新版</a></li>
<li style="border-bottom:0px;"><a href="#">意见反馈</a></li>
</ul>
</div>
</div>
</body>
</html>