PagePiling.js 全屏滚动插件配置参数和方法函数 - 文章教程

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

发布于 2019-11-20 字数 4644 浏览 1594 评论 0

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

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 使用的人数也更多。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0