鼠标滑过展开，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>

 

 

 

 

 

 

posted @ 2012-07-14 17:39  赵小磊  阅读(613)  评论(0)    收藏  举报
回到头部