0

我正在尝试做一个网站，其中有一个部分，当您单击菜单按钮时，内容必须水平滚动，它也有方向导航，我想我用方向导航得到了它，但我无法弄清楚关于如何跟踪我的 div 的位置以便在我每次点击它们时移动它们。我正在尝试使用 offset(); 使用 jquery 但无法正常工作。如果有人可以帮助我实现这一目标，我将不胜感激。我给你留下一些代码和一个 js fiddle，这样你们就可以看到我到目前为止所拥有的东西。

html代码：

<nav>
    <ul>
        <li id="1" class="active-state">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
        <li id="4">4</li>
        <li id="5">5</li>
    </ul>
</nav>

<section id="content">
    <div id="wrapper">
        <div class="content" id="yellow"></div>
        <div class="content" id="blue"></div>
        <div class="content" id="red"></div>
        <div class="content" id="purple"></div>
        <div class="content" id="green"></div>
    </div>
</section>
<ul id="directionNav">
    <li id="left">left</li>
    <li id="right">right</li>
</ul>

jquery代码做水平滚动：

$("#3").on("click", horizontalScroll);
$("#4").on("click", horizontalScroll2);

function horizontalScroll() {
console.log($("#3").offset().left);
$("#wrapper").animate({
    right: ($("#4").offset().left -1200)
});
console.log("clicked");
}

function horizontalScroll2() {
console.log($("#4").offset().left);
$("#wrapper").animate({
    right: ($("#4").offset().left -1200)
});
console.log("clicked");
}

这是小提琴：http: //jsfiddle.net/xtatanx/DY3k3/

非常感谢大家！

4

1 回答 1

1

我认为你编码太多了！

使用他链接的页面为您的 HTML 标记赋予属性：

<li frame='1' class='nav'>page 1</li>

.nav然后在所有将进入属性中调用的页面的所有内容上添加一个signle函数：

function changeFrame(){
    $('#wrapper').animate({left : $(this).attr('frame')*-600});
    $('.active-state').removeClass('active-state')
    $(this).addClass('active-state')
}

对于您的下一个/上一个链接，只需检查您当前所在的页面并添加/减去 1。我在 2 函数中执行此操作以获得更清晰的代码。

在点击它检查至极点击：

function navigFrame(){
    switch(this.id){
        case 'left' : doNavig(-1); break;
        case 'right' : doNavig(1); break;
    }
}

这是代码onNavig：

function doNavig(direction){
    var newPage = parseInt($('.active-state').attr('frame'))+direction;
    if(newPage < $('.nav').length && newPage >= 0){
        $('#wrapper').animate({left : newPage*-600});
        $('.active-state').removeClass('active-state')
        $('.nav:nth-child('+String(newPage + 1)+')').addClass('active-state')
    }
}

代码可以更优化，但我希望你做一些工作:)

这是完整的代码：http: //jsfiddle.net/DY3k3/2/

于 2013-04-30T17:32:52.270 回答