PagePiling.js 全屏滚动插件配置参数和方法函数

发布于 2019-11-20 20:27:25 字数 4141 浏览 1789 评论 0

pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现全屏滚动效果。支持所有的主流浏览器,包括IE8+,支持移动设备。下面详细讲解下 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对象定义导航文字颜色、背景颜色、位置和 tooltip
normalScrollElements字符串null避免在某些元素上自动滚动,如地图,有滚动条的 div 等
normalScrollElementTouchThreshold整数5设定一个阈值,以便在移动设备上滑动定义了 normalScrollElements 的元素
touchSensitivity整数5触摸灵敏度
keyboardScrolling布尔值true使用键盘控制
sectionSelector字符串.section每一屏的选择器
animateAnchor布尔值false是否以动画的方式滚动到某一个锚链接
afterRender页面初始化后的回调函数
onLeave滚动前的回调函数
function(index, nextIndex, direction){}
afterLoad滚动后的回调函数
function(anchorLink, index){}

参数的使用方法如下:

$(document).ready(function() {
  $('#pagepiling').pagepiling({
    menu: null,
    direction: 'vertical',
    verticalCentered: true,
    sectionsColor: [],
    anchors: [],
    scrollingSpeed: 700,
    easing: 'swing',
    loopBottom: false,
    loopTop: false,
    css3: true,
    navigation: {
      'textColor': '#000',
      'bulletsColor': '#000',
      'position': 'right',
      'tooltips': ['section1', 'section2', 'section3', 'section4']
    },
    normalScrollElements: null,
    normalScrollElementTouchThreshold: 5,
    touchSensitivity: 5,
    keyboardScrolling: true,
    sectionSelector: '.section',
    animateAnchor: false,

    //events
    onLeave: function(index, nextIndex, direction){},
    afterLoad: function(anchorLink, index){},
    afterRender: function(){},
  });
});

方法函数

名称说明
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);

其实这个插件的使用方法和 Fullpage 是很相似的,包括所有的回调函数和配置参数,以及函数初始化外调用的方法函数等,不过两个插件似乎没有任何联系,而 Fullpage 使用的人数也更多。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。