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()
向下滚动
mov eto (page_index)
滚动到，如 $(‘.main’).mov eto (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
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。