稍微满意点的导航栏效果的JS代码

将昨天的东西改进了一点点，可以说稍微满意点了，可以拿来用了：

JS代码：

$(function() {
    //将背景显示在当前页面所属项的后面
    fnMoveBGTo($('#botonera>ul>li.current'));
    $('#menu_background').css('visibility', 'visible');
    //为菜单添加鼠标进入事件
    $('#botonera>ul>li').mouseenter(function() {
        var curobj = $(this);
        $(this).addClass('mousefocus');
        //此处用了个延时，给removeClass提供时间
        setTimeout(function() {
            if (curobj.hasClass('mousefocus')) {//如果鼠标还停留在此菜单上
                fnMoveBGTo(curobj);
            }
            curobj = null;
        }, 50);
    }).mouseout(function() {
        $(this).removeClass('mousefocus');
    });
    //当鼠标移出菜单范围时，将背景还原当前页面所属项的后面
    $('#botonera').mouseleave(function() {
        fnMoveBGTo($('#botonera>ul>li.current'));
    });
});
//将背景移到对象后面，此处需要调整，可以加上背景弹性效果
function fnMoveBGTo(obj) {
    $('#menu_background').animate({ left: obj.attr('offsetLeft'), width: obj.attr('offsetWidth') }, 'fast');
}

 

源代码下载：NavBar