0

我正在尝试构建一个导航滑块，它就像在导航链接下滑动的箭头。我想将它设置为 div 的中心。

这是我的导航代码：

<nav>

        <ul class="tabs">
            <li id="tab1"><a href="#">Cursussen</a></li>
            <li id="tab2"><a href="#">Resultaten</a></li>
            <li id="tab3"><a href="#">Inbox</a></li>
            <li id="tab4"><a href="#">Profiel</a></li>
            <li id="tab5"><a href="#">Aanbod</a></li>
        </ul>

        <a id='slider'><img src="img/arrow.png"></a>

</nav>

这是我用来制作动画的 jquery：

$(function(){
        $('li#tab1').click(function(evt) {
            evt.preventDefault();
            $('#slider').animate({
                left : '32'
            });
        });
});

我在想我可以创建一个像下面这样的变量，它计算我想要移动到中心的 div 的宽度。但我不完全知道如何为动画部分编写代码。

var w = '$(#slider).parent().width()'/2
4

1 回答 1

1

请试试这个js小提琴：

http://jsfiddle.net/Q4efa/2/

特别是，我使用了以下方法：

$('ul.tabs li').click(function(event){

    event.preventDefault();

    var ulOffsetLeft = $('ul.tabs').offset().left;
    var currentOffset = $(this).offset().left;

    var delta = currentOffset - ulOffsetLeft;

    $('#slider').clearQueue().animate({'margin-left': delta});

});​

更新：我在这里为这个新小提琴添加了一些自动填充计算：

http://jsfiddle.net/Vt2dv/8/

于 2012-07-02T11:37:24.230 回答