css可能是jquery的帮助

Question

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

他希望它能够实现，以便导航下方的暗条在页面加载时动画到当前页面（想想进度条）。没有PHP的显着我可以对它进行排序，以便当前a有一个类，所以我可以识别当前页面，但是我不知道如何设置导航下方的栏的动画，是否有人有任何建议？< / p>

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：<div style="position:absolute;top:0px;left:0px;height:100%;" id="progress">
• 将“progress”div的宽度设置为步骤1的90px，步骤2的195px，步骤3的278px，步骤4的414px
• 如果需要，请使用jQuery的动画设置：$.animate({width: 195})以使其滚动。

执行此操作，您的条形图和文本都将移动。

如果您不关心文字，请跳过图片部分，然后制作一个灰色的div来做同样的事情。

请参阅www.vouchr.com了解动画效果。

Answer 3

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