0

ここをクリックしてライブデモをご覧ください。

素敵なアニメーションでセクション間を移動したい。視差デザインの各「ページ」は に分かれてい<section>ます。私のコードの一部を以下に示します。

<div id="sliding">
        1
        2
        3
        4
        5
        </div>
    <section data-type="background" data-speed="20" style="background: url('http://media.vogue.com/files/2012/08/15/img-4vogue120erdemjpg_133133774497.jpg') 50% 0 repeat fixed; min-h-margin: 0 auto; height: 1000px;">
        bla bla
    </section>
    <section data-type="background" data-speed="10" style="background: url('http://media.vogue.com/files/2013/01/15/storm-troupers-02_191346273703.jpg') 50% 0 repeat fixed; min-h-margin: 0 auto; height: 1000px;">
        bla bla bla
    </section>
4

1 に答える 1

0

セクションに一意の ID を付け、ページネーション ドットをそれらの ID に一致するターゲットを持つハイパーリンクに変換し、localScroll を使用して素敵なアニメーションを作成します。

詳細とダウンロード: http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html

html で次のようにします。

<!-- snip -->

<head>
    <!-- this loads the scripts in the correct order -->
    <script type="text/javascript" src="js/jQuery.min.js">
    <script type="text/javascript" src="js/scrollTo.min.js">
    <script type="text/javascript" src="js/localScroll.min.js">
</head>

<!-- snip -->

<div id="sliding">
    <a href="#section1">1</a>
    <a href="#section2">2</a>
    <a href="#section3">3</a>
    <a href="#section4">4</a>
    <a href="#section5">5</a>
</div>
<section id="section1" ... etc.

次に、JavaScript で:

$('a').localScroll();

それでおしまい！セクション リンクの 1 つをクリックすると、滑らかなスクロール アニメーションが表示されます (localScroll がなければ、そのセクションに直接ジャンプするだけです)。

于 2013-03-17T18:21:12.730 に答える