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
小编说
以上是编程之家为你收集整理的onepage-scroll全部内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。