README

#One Page Scroll 1.3.1 by Pete R. 使用 One Page Scroll 插件创建一个类似苹果风格的单页滚动网站（iPhone 5S 网站）。由 Pete R. 创建，BucketListly 创始人

许可: 署名-相同方式共享 4.0 国际

要求

jQuery (1.9.0 或更高版本)

注意：强烈推荐使用 1.9.0 或更高版本的 jQuery，因为使用低于 1.8.3 的 jQuery 和 jquery.onepage-scroll.js 一起使用时，可能会出现基于哈希的 XSS 漏洞。

查看：http://jsfiddle.net/33WJx/

演示

查看演示

兼容性

现代浏览器（如 Chrome、Firefox 和 Safari）在桌面和智能手机上均已测试。应能在 IE8 和 IE9 上正常运行。

基本用法

One Page Scroll 允许您将网站转换为单页滚动网站，用户可以一次滚动一页。非常适合创建您希望向观众展示的网站。例如，苹果的 iPhone 5S 网站就使用了相同的技巧。

要将此添加到您的网站中，只需将最新版本的 jQuery 库以及 jquery.onepage-scroll.js、onepage-scroll.css 包含到文档的 <head> 中，并按以下方式调用函数

<body>
  ...
  <div class="main">
    <section>...</section>
    <section>...</section>
    ...
  </div>
  ...
</body>

容器 "Main" 必须位于 body 标签下一级，以便使其全页工作。现在按以下方式调用函数以激活

$(".main").onepage_scroll({
   sectionContainer: "section",     // sectionContainer accepts any kind of selector in case you don't want to use section
   easing: "ease",                  // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
                                    // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 1000,             // AnimationTime let you define how long each section takes to animate
   pagination: true,                // You can either show or hide the pagination. Toggle true for show, false for hide.
   updateURL: false,                // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
   beforeMove: function(index) {},  // This option accepts a callback function. The function will be called before the page moves.
   afterMove: function(index) {},   // This option accepts a callback function. The function will be called after the page moves.
   loop: false,                     // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
   keyboard: true,                  // You can activate the keyboard controls
   responsiveFallback: false,        // You can fallback to normal page scroll by defining the width of the browser in which
                                    // you want the responsive fallback to be triggered. For example, set this to 600 and whenever
                                    // the browser's width is less than 600, the fallback will kick in.
   direction: "vertical"            // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".  
});

这就完成了。现在，您的网站应该与苹果的 iPhone 5S 网站一样工作。当在手机上查看您的网站时，您应该能够上下滑动（感谢 Eike Send 提供的滑动事件！）

键盘快捷键

您也可以通过热键触发页面移动

上箭头 / 页上

按下上箭头或页上键可以向上移动一页。

下箭头 / 页下

按下下箭头或页下键可以向下移动一页。

空格键

按下空格键可以向下移动一页。

Home

按下 Home 键将您带回到第一页。

End

按下 End 键将您带到最后一页。

公共方法

您也可以以编程方式触发页面移动

$.fn.moveUp()

此方法允许您向上移动一页。此操作相当于向上滚动/向下滑动。

  $(".main").moveUp();

$.fn.moveDown()

此方法允许您向下移动一页。此操作相当于向下滚动/向上滑动。

  $(".main").moveDown();

$.fn.moveTo(page_index)

此方法允许您以编程方式移动到指定的页面索引。

  $(".main").moveTo(3);

回调函数

您可以使用回调函数在页面移动前后执行操作。

beforeMove(current_page_index)

此回调在插件执行移动之前被调用。

  $(".main").onepage_scroll({
    beforeMove: function(index) {
      ...
    }
  });

afterMove(next_page_index)

此回调在移动动画完成后被调用。

  $(".main").onepage_scroll({
    afterMove: function(index) {
      ...
    }
  });

如果您想看到我的更多插件，请访问 The Pete Design，或者在 Twitter 和 Github 上关注我。

peachananr / onepage-scroll

维护者

详细信息