鼠标滑过展开,js版和jquery版
<!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%; width:80px; height:100px; cursor:pointer; margin-top:-50px; font:12px/1.5 arial; background-color:#CCC; } #help span{ position:absolute; left:-20px; width: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{width:110px;position:fixed; top:300px; right:-90px;border:1px solid #d9d9d9} .r_l{padding:8px 0px;width:20px; background:#CCC; text-align:center;float:left; cursor:default;} .r_r{float:right; line-height:28px; text-align:left;width: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>