jquery 滑块导航菜单

最新推荐文章于 2024-07-26 20:46:33 发布

dengyun1985

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量139

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ntt1219/p/3874248.html

版权

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

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

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

转载于:https://www.cnblogs.com/ntt1219/p/3874248.html

dengyun1985

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 滑块导航菜单

带滑块的导航菜单，鼠标悬浮时，滑块会移动至鼠标位置，离开时，滑块会回到原来的位置，点击菜单之后滑块会停留在被点击菜单位置，等待下一次的鼠标悬浮事件或者点击事件，效果图：图片效果不行，直接上代码：<body> <div class="nav"> <span>aaa</span> &...
复制链接

扫一扫