-1

複数のページを持つウェブサイトを作成しています。それらを別のWebページにするのではなく、同じページの別のdivにする必要があります。次に、ユーザーが特定のdivをクリックすると、矢印に従って左右にスライドする2つの左右のボタンがあります。jQuery、HTML、CSSでこれを行うにはどうすればよいですか?

私の部門: 

<div id="main-page">    
</div>
<div id="about-us">
</div>
<div id="contact-us">
</div>

Div には特定の背景画像があり、そのサイズはフルスクリーンです。

私のスクリプト：

$("#main-page").click(function() {
    $("#main-page").hide("slide", {direction: "left"}, 1000);
    $("#about-us").show("slide", {direction: "right"}, 1000);
});

おっしゃるとおり、そんなことはしたくありません。左または右にスライドする div の順番を矢印で確認したい。

4

2 に答える 2

2

HTML

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<input type="button" class="next" value="Next">
<input type="button" class="prev" value="Prev">

CSS

#wrapper {
    white-space: nowrap;
    width: 1500px
}

.box {
    width: 200px;
    height: 200px;
    border: thin solid red;
    margin: 0 10px 0 0;
    display: inline-block
}

​.prev,
.next { position: fixed; top: 50% }

.prev { left: 0 }
.next { right: 0 }

JS

$(function() {
    // We create an array and populate
    // it with all .box left offsets
    var boxLefts = [];
    $('.box').each(function(i, el) {
        boxLefts.push(this.offsetLeft);
    });

    // Now we attach an on click event handler
    // to our prev/next buttons
    $(".prev, .next").click(function(e) {
        var dir = false,
            targetLeft = -1;

        // to get the current direction
        // we use the className of the current clicked button
        var target = e.target.className;

        // we set the earlier defined direction variable
        // based on the clicked button
        if (target == 'next') {
            dir = 1;
        } else {
            dir = -1;
        }

        // when the next-button is clicked
        // we loop through the .box-offsets array
        if (dir) {
            // prevent the default onclick behaviour
            e.preventDefault();

            // get the current scroll-offset
            winLeft = window.scrollX;

            $.each(boxLefts, function(i, v) {
                // we check that we are not at the end or beginning
                // of the viewport. If we are not
                // we set targetLeft to the current/matching offsets-array item.
                if ((dir == 1 && winLeft < v && targetLeft < 0) || (dir == -1 && winLeft > v)) {
                    targetLeft = v;
                }
            });

            // if truthy we animate the scrolling to the next/previous box-offset
            if (!targetLeft) {
                $('html:not(:animated), body:not(:animated)').stop().animate({
                    scrollLeft: targetLeft
                }, 1000);
            }
        }

        // prevent the default onclick behaviour
        return false;
    });
});

デモ

于 2012-09-16T12:47:57.637 に答える
0

それは次のようなものかもしれません：

<div class='container'>
    <div class='all-pages'>
        <div class='page' id='page-1'>PAGE 1</div>
        <div class='page' id='page-2'>PAGE 2</div>
        <div class='page' id='page-3'>PAGE 3</div>
        <div class='page' id='page-4'>PAGE 4</div>
    </div>
</div>

.container {
   width: 960px;
   overflow: hidden;
   position: relative;
}

.all-pages {
   float:left;
   width: 10000px;
   position: relative;
   left: 0;
   top:0;
}

.page {
   float: left;
   width: 960px;
}

基本的には、jCarousel と同じ原則ですが、要素の配置と幅をより大きなスケールに基づいているため、各アイテムがページを埋めます。

  • container- 可視領域

  • all-pages- 実質的にすべてのページの「リール」

次に、表示をスクロールするために左右のボタンをページ (またはメニュー?) に追加する必要があります。これらは、コンテナ ビュー内にとどまるように絶対に配置する必要があります。

左ボタンと右ボタンに関数を追加するときは、jQuery アニメーション スタイル関数を使用して、すべてのページの div 内で left の値を変更するだけで、滑らかな外観のトランジションが作成されます。

于 2012-09-16T11:46:01.237 に答える