jQuery鼠标滑动导航菜单

收藏

分享一个简单通用的动画导航菜单效果，菜单背景按钮会跟随鼠标滑动。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<div class="nav"> 
    <div id="navSelected" class="navSelected"></div> 
    <ul id="navBd" class="clearfix"> 
        <li id="navCurr" class="navHover"><a href="#">网站首页</a></li>                     
        <li><a href="#">网站建设</a></li> 
        <li><a href="#">网站维护</a></li> 
        <li><a href="#">网站改版</a></li> 
        <li><a href="#">网站优化</a></li> 
        <li><a href="#">成功案例</a></li> 
        <li><a href="#">常见问题</a></li> 
    </ul> 
</div>

jQuery

//擦除效果 
jQuery.extend(jQuery.easing, { 
    easeOutBack: function(x, t, b, c, d, s) { 
        s = s || 1.3; 
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; 
    } 
}); 
 
//nav初始化选中 
var navCurr = $("#navCurr"); 
$("#navSelected").css("left", navCurr[0].offsetLeft); 
 
//nav里的链接hover效果 
$("#navBd li").hover(function() { 
    if ( !! $("#navSelected").stop(true).animate({ 
        left: $(this)[0].offsetLeft 
    }, 
    400, "easeOutBack")) { 
        $(this).siblings().removeClass("navHover").end().addClass("navHover"); 
        $(this).find("a").hide().fadeIn(300); 
    } 
 
}, 
function() { 
    $(this).removeClass("navHover"); 
    $("#navCurr").addClass("navHover"); 
    //window.setTimeout(function(){$("#navCurr").parent().addClass("navHover")},100); 
    $("#navSelected").stop(true).animate({ 
        left: navCurr[0].offsetLeft 
    }, 
    300, "easeOutBack"); 
}); 
 
})