jQuery插件jquery.onepage-scroll.js实现单页/全屏滚动示例-bootschool.net

jquery.onepage-scroll.js是一款简单易上手的带视差的单页/全屏滚动页面插件。这个插件能够每次上下滚动一个整屏页面，还带有视觉差效果。全页面滚动插件多用于产品介绍推广、海报、招聘等内容较少简单页面。

入门指南

jquery.onepage-scroll.js插件使用教程

插件介绍

特性

小巧，压缩版本仅 9kb左右：
可以在右侧显示圆点导航
循环/禁止循环可控
回退（使用浏览器自带滚动）/指定回退
支持键盘控制，左右上下/ Page Up / Page Donw / Home / End 等
水平/横向滚动
支持回调函数

在现代浏览器，如台式机和智能手机上的Chrome，Firefox和Safari已经过测试。应该在IE8和IE9上正常工作。

注意：官方建议使用jQuery 1.9.0或更高版本，因为如果是小于1.8.3的jQuery和 jquery.onepage-scroll.js结合使用可能会导致XSS漏洞。

使用步骤

1、引入依赖

<link rel="stylesheet" href="css/onepage-scroll.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.onepage-scroll.min.js"></script>

2、HTML标签（部分代码）

<div class="main">
    <section class="page1">
        <div class="page_container">
            <h1>创新决定了你是领袖还是跟随者</h1>
            <p>......</p>
        </div>
    </section>
    <section class="page2">
        <div class="page_container">
            <h1>iPhone</h1>
            <p>......</p>
        </div>
    </section>
    <section class="page3">
        <div class="page_container">
            <h1>MAC</h1>
            <p>......</p>
        </div>
    </section>
</div>

3、JavaScript初始化

$(".main").onepage_scroll({
    sectionContainer: "section"
});

配置选项和方法

选项

sectionContainer 字符串类型，绑定/制定元素，可以是标签或class，默认值section
easing 字符串类型，动画过度效果，可选 ease/linear/ease-in，默认值ease
animationTime 整数类型，动画过度时间，以毫秒为单位，默认值1000
pagination 布尔值类型，显示右侧圆点项目导航，默认值true
updateURL 布尔值类型， URL 显示命名锚记，默认值false
loop 布尔值类型，循环滚动，默认值true
keyboard 布尔值类型，键盘控制，支持左右上下/ Page Up/ Page Down/Home/End,默认值true
responsiveFallback 布尔值/整数, 回退，即使用浏览器自带滚动，默认false，既不使用浏览器自带滚动。也可以指定一个固定值，当页面的宽度小于这个值时，将自动回退,默认值false
direction 字符串类型，页面滚动方向，可选 vertical（垂直/竖向）和 horizontal（水平/横向），默认值vertical