感受很好纵向导航hover效果，移出恢复当前位置

体验很好纵向导航hover效果，移出恢复当前位置

duration返回当前音频/视频的长度（以秒计）体验很好纵向导航hover效果，移出恢复当前位置

很常见的一种导航的hover效果，鼠标放上后除了正常的hover，在移出整个导航后，会恢复当前栏目的特殊样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*CSS源代码*/
        ul{ list-style:none; margin:0; padding:0;}
        .box{ width:300px; height:350px; margin:100px auto; position:relative; z-index:0; border:2px solid #F99;}
        .box ul{ width:300px; position:absolute; z-index:2; left:0; top:0;}
        .box li{ padding:0 10px; height:49px; line-height:49px; cursor:pointer; border-bottom:1px dotted #ccc;}
        .box li:last-child{ border:none;}
        .bg{ width:300px; height:50px; background:#3CF; position:absolute; z-index:1; left:0; border-radius:10px;}

    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div class="box">
    <ul>
        <li>导航1</li>
        <li class="on">当前栏目</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
        <li>导航7</li>
    </ul>
    <div class="bg"></div>
</div>



<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    /*Javascript代码片段*/
    $(document).ready(function(){
        var menuLi=$(".box li");
        var menuUl=$(".box");
        var bg=$(".bg");

        function onSelect(){
            n=menuUl.find("li.on").index();
            bg.animate({top:menuLi.outerHeight()*n},{queue:false,duration:100});
        }
        onSelect();

        menuLi.hover(
                function(){
                    n=$(this).index();
                    bg.animate({top:menuLi.outerHeight()*n},{queue:false,duration:100});
                },
                function(){
                    onSelect();
                }
        );
    });
</script>
</body>
</html>

感受很好纵向导航hover效果，移出恢复当前位置

相关推荐