javascript - css 可能是 jquery 帮助

Question

我的设计师设计了以下导航

他希望实现它，以便导航下方的黑条在页面加载时动画到当前页面（想想进度条）。没有明显的 PHP 我可以对它进行排序，以便当前a有一个类，以便我可以识别当前页面，但是我不知道如何为导航下方的栏设置动画，有人有什么建议吗？

Answer 1

对不起，我会在这里发帖。

我认为你需要一个 div 中的 div。外部 div（代表导航下方的整行）需要是总导航的宽度。然后，您可以使用 jquery 将内部 div（进度条）设置为与上面的 nav 元素相同的宽度，并将其左侧位置设置为您已将类添加到的导航项的位置。

就像是

$(document).ready(function(){

    $('.selectedNav').click(function(){

    var navWidth = $(this).width();
    var posLeft = $(this).position();

    $('#innerDiv').animate({'width': navWidth, 'left': posLeft.left});

    });

});

Answer 2

• 制作一个绿色框的图像，文本和栏“切掉”（例如透明）
• 把它放到一个<div style="position:relative;">
• 在其中放置另一个 div：<div style="position:absolute;top:0px;left:0px;height:100%;" id="progress">
• 将“进度” div 的宽度设置为步骤 1 的 90 像素，步骤 2 的 195 像素，步骤 3 的 278 像素，步骤 4 的 414 像素
• 如果你愿意，使用 jQuery 的动画设置 with:$.animate({width: 195})让它滚动。

这样做，你的栏和文本都会移动。

如果您不关心文本，请跳过图像部分并制作一个执行相同操作的灰色 div。

有关动画效果，请参见 www.vouchr.com。

Answer 3

你可以试试这个 jquery 插件： http: //grasshopperpebbles.com/ajax/a-jquery-progress-bar-plugin/