jquery 滑块导航菜单

浏览数：17 / 时间：2015年06月09日

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

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

<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

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

标签： class style 代码 src com display log itblog class style 代码 src com display log itblog

相关文章

随机文章

您可能还喜欢

您可能还喜欢