jquery弹性菜单

【Javascript】

下载

新闻

文章

jquery弹性菜单

查看效果：http://down.scscms.com/javascript/jqmenu.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
    ul{
        position: absolute;
        top:40px;right:0;
        width:200px;
        overflow: hidden;
        padding:0;
    }
    li{
        border: 1px solid #1e82dd;
        border-left:20px solid #1e82dd;
        height:20px;
        margin:1px;
        font: 12px/20px "微软雅黑";
        width:200px;
        margin-left:180px;
        list-style: none;
    }
    li:hover{background-color:#dddddd;}
</style>
<ul>
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
    <li>菜单4</li>
    <li>菜单5</li>
    <li>菜单6</li>
    <li>菜单7</li>
    <li>菜单8</li>
    <li>菜单9</li>
    <li>菜单10</li>
    <li>菜单11</li>
    <li>菜单12</li>
    <li>菜单13</li>
    <li>菜单14</li>
    <li>菜单15</li>
    <li>菜单16</li>
    <li>菜单17</li>
    <li>菜单18</li>
    <li>菜单19</li>
    <li>菜单20</li>
    <li>菜单21</li>
    <li>菜单22</li>
    <li>菜单23</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
    var last= 0,move=true;
    $("ul").mouseenter(function(){
        $("li").mouseenter(function(){
            if(move)elasticity($("li"),$(this).index(),0);
            move=false;
        }).mouseleave(function(){
           last=$(this).index()
        });
    }).mouseleave(function(){
        elasticity($("li"),last,180);
        move=true;

    });
});
function elasticity(li,i,l){
    var len=li.size(),mid= 0,tout,s="slow";
    function fun(i,o,l){
        clearTimeout(tout);
        if(o==0){
            o =i>(len-1)/2?-1:1;
            mid=i*2;
            li.eq(i).stop().animate({marginLeft:l},s);
        }
        i+=o;
        var ii=mid-i;
        if(i<len&&i>=0){
            tout=setTimeout(function(){
                if(ii<len&&ii>=0)
                li.eq(ii).stop().animate({marginLeft:l},s);
                li.eq(i).stop().animate({marginLeft:l},s);
                fun(i,o,l);
            },100);
        }
    }
    fun(i,0,l);
}
</script>