jQuery带视觉差的整个页面滚动特效插件OnePageScroll.js-爱编程

jQuery带视觉差的整个页面滚动特效插件OnePageScroll.js

来源：htmleaf 阅读：9 时间：2018-02-04 01:25

OnePageScroll.js是一款十分好用的jQuery带视觉差的整个页面滚动特效插件。这个插件能够每次上下滚动一个页面，还带有视觉差效果，简单实用。

该整页滚动插件已经在Chrome, Firefox, Safari 和 IE10的桌面和移动浏览器上测试通过。

这个整页滚动插件会自动检测鼠标滚轮或鼠标手势（使用Eike的 jQuery Swipe Events ）来决定向哪个方向滚动页面。当用户使用鼠标滚轮或手势是，插件将自动使用CSS3 transform 来使整个页面向上或向下滚动。

HTML结构

使用该整页滚动插件，首先要在页面中引入jquery和jquery.onepage.js以及onepage-scroll.css。

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

注意：推荐将wrapper div.mian放在body标签的下一级，这样更容易将它制作成全屏效果。

JAVASCRIPT

通过下面的语句来调用该整页滚动插件。

$(document).ready(function() {
  ...
  $(".main").onepage_scroll({
     sectionContainer: "section", 
     easing: "ease",
     animationTime: 1000,
     pagination: true,
     updateURL: false
  });
  ...
});

下面介绍一些可用参数：

sectionContainer ：如果你不想使用section来作为每个单页，可以使用该参数来改变它。该参数接收jQuery选择器，默认标签为section。
easing ：该参数用于确定页面在向上或向下滚动时的easing effect（缓动效果）。该参数接收所有的CSS3 easing选项，例如：linear, ease-in, ease-out, ease-in-out，你甚至可以使用cubic-bezier制作反弹效果。更多关于如何生成cubic-bezier的效果资料，请参考Ceaser。默认值为ease。
animationTime ：该参数用于设置每次执行动画的时间。单位毫秒，默认值为1000。
pagination ：如果设置为true，将自动在屏幕的右边添加一个分页条。你可以通过CSS很容易的改变它的位置。设置为false移除分页条。默认值为true。
updateURL ：该参数用于设置是否改变用户当前浏览的section的URL到指定的URL。如果你想让每个section都指向不同的URL设置该参数为true。默认值为false。

公共方法

该整页滚动插件可以通过编程的方式来触发页面的滚动，它提供了一些公共方法。

$.fn.moveUp()

该方法使页面向上滚动一页。

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

$.fn.moveDown()

该方法使页面向下滚动一页。

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

你可以在按钮上使用上面的公共方法来使页面整页上下滚动。

在线预览源码下载