Question

我想在动画很好的部分之间导航。每个＆＃34;页面＆＃34;在视差设计中分为<section>＆＃39; 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>

Answer 1

为这些部分添加唯一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，它将直接跳转到该部分）。

视差在部分之间导航

1 个答案: