4

2 つのページがあり、それらを水平方向にスクロールしようとしています。しかし、ページ幅はまたがっていません。ページ 2 が表示されます。これを修正する方法は？

フィドル: http://jsfiddle.net/x8WVe/

HTML:

<section class="section span12" id="section1">
        <header>
            <div class="main-header">
                <a href="#" alt="My Logo"><span class="get">My Logo</a>
            </div>
        </header>
        <div class="content-wrapper span10">
            <div class="sub-headline span8">
                <h2>sfdhgsafdhasgh</h2>
                <small>dshgfgdsjhgfgfjhdgsfdjgdf</small>
            </div>
            <div class="inner span8">
                <p>
                    ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf
                </p>
                <a href="#" class="btn" id="click" alt="click" aria-label="click" tab-index="-1">Click</a>
            </div>
            <a class="nav-slide next" href="#section2">&rsaquo;</a>
        </div>

    </section>

    <section class="section span12" id="section2">
        <header>
            <div class="main-header">
                <a href="#" alt="My Logo">My Logo</a>
            </div>
        </header>
        <div class="content-wrapper span10">
            <div class="sub-headline span8">
                <h2>sfdhgsafdhasgh</h2>
                <small>dshgfgdsjhgfgfjhdgsfdjgdf</small>
            </div>
            <div class="inner span8">
                <p>
                    ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>ewtytrfjwhbfhshgfeyjrgf<br>
                </p>
                <a href="#" class="btn" id="click" alt="click" aria-label="click" tab-index="-1">Click</a>
            </div>
            <a class="nav-slide prev" href="#section2">&lsaquo;</a>
        </div>
    </section>

CSS:

body{
    font-family:Georgia;
    font-size: 34px;
    font-style: italic;
    letter-spacing:-1px;
    width:12000px;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
}

/*Page Styles*/

/*header*/
header {
    background-color: #fdfdfd;
    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
    border-bottom-color: transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 7%;
}


.section{
    margin:0px;
    bottom:0px;
    float:left;
    height:100%;
    text-shadow:1px 1px 2px #f0f0f0;
}
.section h2{
    margin:50px 0px 30px 50px;
}
.section p{
    margin:20px 0px 0px 50px;
    width:600px;
}



.section#section1 {
    background-color: #48a95e;
}
.section#section2{
    background-color: #C6FFC8;
}
.section ul{
    list-style:none;
    margin:20px 0px 0px 550px;
}
.content-wrapper {
    border: 1px solid red;
    position: relative;
    top: 20%;
    text-align: center;
}

/*Slide Nav Button*/
.nav-slide {
    position: relative;
    top: 13%;
    vertical-align: middle;
}

.prev {
    float: left;
}
.next {
    float: right;
}

JS:

$(function() {
                $('a.next').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeInOutExpo');
                     */
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
                $('a.prev').bind('click',function(event){
                    var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
            });
4

4 に答える 4

2

ボディに 200% の相対幅を使用して、ウィンドウのサイズの 2 倍にし、各セクションをボディのサイズの半分にすることができます。

body{
    width:200%;
}

.section{
    width: 50%;
}
于 2013-11-08T09:47:00.237 に答える
0

あなたのリンクは にアニメーション化scrollLeftされて$(this.href).offset().leftいます。これは最初のリンクでは問題なく機能しますが、2 番目のリンクは既に独自の位置にスクロールされています。

これを解決するには、リンクの場所ではなく、各セクションの場所を参照してください。

JSフィドル

$(function () {
    $('a.next').bind('click', function (event) {
        var $goNext = $(this).parents('section').next('section');
        $('html, body').stop().animate({
            scrollLeft: $goNext.offset().left
        }, 1000);
        event.preventDefault();
    });
    $('a.prev').bind('click', function (event) {
        var $goBack = $(this).parents('section').prev('section');
        $('html, body').stop().animate({
            scrollLeft: $goBack.offset().left
        }, 1000);
        event.preventDefault();
    });
});

編集：1つの機能に結合 -

$(function () {
    $('.nav-slide').bind('click', function (event) {
        var $goHere = ($(this).hasClass('next')) ? $(this).parents('section').next('section') : $(this).parents('section').prev('section');
        $('html, body').stop().animate({
            scrollLeft: $goHere.offset().left
        }, 1000);
        event.preventDefault();
    });
});

凝縮されたコード (およびいくつかの修正された HTML) を備えた新しい Fiddle 。

于 2013-11-08T10:04:04.257 に答える