pagePiling.js参数详解

来源:互联网 发布:linux 系统备份与恢复 编辑:程序博客网 时间:2024/05/16 16:10

pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现全屏滚动效果。支持所有的主流浏览器,包括IE8+,支持移动设备。下面详细讲解下pagePiling.js的参数和函数。

1、pagePiling.js配置选项

属性/方法类型默认值说明menu字符串null绑定菜单direction字符串vertical滚动方向,可选 vertical(垂直/竖向) 或 horizontal(水平/横向)verticalCentered布尔值true内容垂直居中sectionsColor数组[]“每一屏”的背景颜色anchors数组[]锚链接名称scrollingSpeed整数700动画时间easing字符串swing动画方式loopBottom布尔值false滚动到底部后循环滚动loopTop布尔值false滚动到顶部后循环滚动css3布尔值true使用 css3 动画,如果浏览器不支持,则自动推到 js 动画navigation对象 定义导航文字颜色、背景颜色、位置和 tooltipnormalScrollElements字符串null避免在某些元素上自动滚动,如地图,有滚动条的 div 等normalScrollElementTouchThreshold整数5设定一个阈值,以便在移动设备上滑动定义了 normalScrollElements 的元素touchSensitivity整数5触摸灵敏度keyboardScrolling布尔值true使用键盘控制sectionSelector字符串.section每一屏的选择器animateAnchor布尔值false是否以动画的方式滚动到某一个锚链接afterRender  页面初始化后的回调函数onLeave  滚动前的回调函数
function(index, nextIndex, direction){}afterLoad  滚动后的回调函数
function(anchorLink, index){}

2、pagePiling.js自定义方法

名称说明moveSectionUp()向上滚动,使用方法:
$.fn.pagepiling.moveSectionUp();moveSectionDown()向下滚动,使用方法:
$.fn.pagepiling.moveSectionDown();moveTo(section)滚动到某一屏,使用方法:
$.fn.pagepiling.moveTo(3);
或者:
$.fn.pagepiling.moveTo(‘page3′);setAllowScrolling(boolean)允许/禁止滚动,使用方法:
$.fn.pagepiling.setAllowScrolling(false);setKeyboardScrolling(boolean)启用/禁止键盘控制,使用方法:
$.fn.pagepiling.setKeyboardScrolling(false);setScrollingSpeed(milliseconds)设置动画时间,使用方法:
$.fn.pagepiling.setScrollingSpeed(800);
0 0