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 ,这种导航条和淘宝已买到的宝贝如出一辙,可用相似方式实现。

jquery 滑块导航菜单,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。