0

目前，当您单击一个 div 框时，它会在屏幕上向左移动，而下一个 div 框将从右侧进入屏幕。需要的是，单击菜单链接滚动到相应的 div 容器。例如，单击链接 5 滚动到 div #5 谁能帮我解决它...？这将是一个很大的帮助家伙。

HTML

<ul class="btns">
        <li><a href="#" rel="box1">1</a></li>
        <li><a href="#" rel="box2">2</a></li>
        <li><a href="#" rel="box3">3</a></li>
        <li><a href="#" rel="box4">4</a></li>
        <li><a href="#" rel="box5">5</a></li>           
    </ul>

    <div id="container">

        <div id="box1" class="box">Div #1</div>
        <div id="box2" class="box">Div #2</div>
        <div id="box3" class="box">Div #3</div>
        <div id="box4" class="box">Div #4</div>
        <div id="box5" class="box">Div #5</div>

    </div>​

Javascript 和 Jquery 部分：

$('.btns>li a').click(function() {
                var page = $(this).attr('rel');
            });                


            $('.box').click(function() {
                $('.box').each( function() {
                    if ($(this).offset().left < 0) {
                        $(this).css("left", "150%");
                    }
                });

                $(this).animate({
                    left: '-50%'
                }, 500);

                if ($(this).next().size() > 0) {
                    $(this).next().animate({
                        left: '50%'
                    }, 500);
                } else {
                    $(this).prevAll().last().animate({
                        left: '50%'
                    }, 500);
                }
            });​

示例：http: //jsfiddle.net/gHYSN/5/

4

2 回答 2

2

好的，这可能不是最好的方法，但它可以按要求工作。

function swdiv(currID, nxtID) {
    $('.box').each(function() {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        }
    });
    $('#' + currID).animate({
        left: '-50%'
    }, 500);
    if ($('#' + nxtID).size() > 0) {
        $('#' + nxtID).animate({
            left: '50%'
        }, 500);
    }
}

$('.btns li a').click(function() {
    var page = $(this).attr('rel'),
        curID = 'box1',
        iWide = $(window).width() / 2;
    $('.box').each(function() {
        if ($(this).css('left') == iWide + 'px') {
            curID = $(this).attr('id');
        }
    });
    swdiv(curID, page);
});
$('.box').click(function() {
    $('.box').each(function() {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        }
    });
    $(this).animate({
        left: '-50%'
    }, 500);
    if ($(this).next().size() > 0) {
        $(this).next().animate({
            left: '50%'
        }, 500);
    } else {
        $(this).prevAll().last().animate({
            left: '50%'
        }, 500);
    }
});

我创建了一个额外的函数来在两个divs 之间切换。在fiddle的第 8 次更新时检查它。

于 2012-10-19T02:56:04.540 回答
0

没有测试这个，但我认为它应该给你基本的想法。

$(".btns a").each(function(index, a) {
    $(a).click(function() {
        var boxnum = index + 1;
        $(window).scrollTop($("#box" + boxnum).offset().top);
    });
}
于 2012-10-19T02:53:53.257 回答