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);
    }
});

2 つの を切り替える追加の関数を作成しましたdiv。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 に答える