鼠标经过出现左拉菜单 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        .div1{
            position:relative;
            width:300px;
            height:46px;
            margin:20px auto;
            border:1px solid red;
            overflow:hidden;
        }
        .div1 a{height:46px;}
        .div1 a i{position:absolute;right:0;display:inline-block;width:46px;height:46px;background:green;z-index:100}
        .div1 a span{/*transition:all 2s;*/height:46px;position:absolute;right:-16px;background:green;z-index:10;border-top-left-radius:5px;border-bottom-left-radius:5px;}
    </style>
</head>
<body>
<div class="div1">
    <a href="javascript:void(0);">
        <i class="div_img">666</i>
        <span class="c">回到顶部</span>
    </a>
</div>
</body>
<script src="js/jquery-1.9.0.js"></script>
<script>
    var timer;
    $(".div1").find("a").hover(function(){
        clearTimeout(timer);
        timer=window.setTimeout(function(){$(".c").animate({"right":"46px"});},300)
    },function(){
        clearTimeout(timer);
        $(".c").animate({"right":"-16px"});
    });

</script>
</html>

 

posted @ 2016-08-08 16:31  dongxiaolei  阅读(331)  评论(0)    收藏  举报