jquery 滑块导航菜单

带滑块的导航菜单，鼠标悬浮时，滑块会移动至鼠标位置，离开时，滑块会回到原来的位置，点击菜单之后滑块会停留在被点击菜单位置，等待下一次的鼠标悬浮事件或者点击事件，效果图：

图片效果不行，直接上代码：

<body>
    <div class="nav">
        <span>aaa</span>
        <span>bbb</span>
        <span>ccc</span>
        <span>ddd</span>
        <div class="nav_bj"></div>
    </div>
</body>
.nav{
    width:1000px;
    text-align:center;
    background:#666666;
    margin:0 auto;
    position:relative;
}
.nav span{
    width:250px;
    height:41px;
    line-height:41px;
    display:inline-block;
    position:relative;
    z-index:11111;
    color:#FFF;
    cursor:pointer;
}
.nav_bj{
    background:#0099FF;
    width:250px;
    height:41px;
    position:absolute;
    top:0;
    z-index:111;
    left:0px;
}
$(function(){
    var x,re,nowX;
    nowX = 0;
    $(".nav span").mouseover(function(){
        x=$(this).position().left;
        $(".nav_bj").animate({left:x})
        clearTimeout(re);
    }).mouseout(function(){
        clearTimeout(re);
        re=setTimeout(function(){
        $(".nav_bj").animate({left:nowX})
        },500);
    });
    $(".nav span").click(function(){
        nowX = $(this).position().left;
        $(".nav_bj").css("left",nowX);
    });
})

需要引用 jQuery ，这种导航条和淘宝已买到的宝贝如出一辙，可用相似方式实现。

posted @ 2014-07-31 15:46  忘了滋味1219  阅读(825)  评论(6)  编辑  收藏  举报