0

点击这里查看现场演示。

我想用漂亮的动画在各个部分之间导航。视差设计中的每个“页面”都被划分为<section>'s. 我的部分代码如下所示。

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

而已！当您单击其中一个部分链接时，您将看到平滑的滚动动画（没有 localScroll，它将直接跳转到该部分）。

于 2013-03-17T18:21:12.730 回答