onepage-scroll

onepage-scroll 介绍

单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件，如之间介绍的 fullPage.js 和 Scrollify，今天再介绍一款 jQuery 单页/全屏滚动插件——onepage-scroll。

onepage-scroll特点

onepage-scroll 还算小巧，min 版本仅 9kb，它有如下功能、特点：

（不）显示右侧圆点项目导航

（不）显示命名锚记

循环/禁止循环

回退（使用浏览器自带滚动）/指定回退

支持键盘控制，左右上下/ Page Up / Page Donw / Home / End 等

水平/横向滚动

回调函数

onepage-scroll兼容 

onepage-scroll 使用了 css3 transform 属性，所以不兼容 IE10 以下的浏览器。你可以设置 responsiveFallback: true 使页面在 IE8、IE9 中能够正常浏览。 

onepage-scroll使用

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>

<section>第一屏</section>

<section>第二屏</section>

<section>第三屏</section>

<section>第四屏</section>

</div>

3、JavaScript

$(function(){

$('.main').onepage_scroll();

});

onepage-scroll配置

基本属性/方法

属性/方法

类型

默认值

说明

sectionContainer

字符串

section

绑定/制定元素，可以是标签或 class

easing

字符串

ease

动画过度效果，可选 ease / linear / ease-in

animationTime

整数

1000

动画过度时间，以毫秒为单位

pagination

布尔值

true

显示右侧圆点项目导航

updateURL

布尔值

false

URL 显示命名锚记

beforeMove

函数

滚动前的回调函数

afterMove

函数

滚动后的回调函数

loop

布尔值

true

循环滚动

keyboard

布尔值

true

键盘控制，支持左右上下/ Page Up / Page Donw / Home / End

responsiveFallback

布尔值/整数

false

回退，即使用浏览器自带滚动，默认我 false，既不使用浏览器自带滚动。也可以指定一个固定值，当页面的宽度小于这个值时，将自动回退

direction

字符串

vertical

页面滚动方向，可选 vertical（垂直/竖向）和 horizontal（水平/横向）

公共方法

方法

说明

moveUp()

向上滚动

moveDown()

向下滚动

moveto(page_index)

滚动到，如 $(‘.main’).moveto(3);

网站地址:http://www.thepetedesign.com/demos/onepage_scroll_demo.html

GitHub:https://github.com/peachananr/onepage-scroll

网站描述:jQuery单页/全屏滚动插件

onepage-scroll

官方网站：http://www.thepetedesign.com/demos/onepage_scroll_demo.html