全屏滚动插件pagePiling.js

清疚 2022-05-20 02:49 494阅读 0赞

pagePiling.js参数详解

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 对象   定义导航文字颜色、背景颜色、位置和 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){}

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);

附:全屏滚动插件pagePiling.js

Demo演示: http://www.dowebok.com/demo/150/

转载地址:http://www.leixuesong.cn/550

发表评论

表情:
评论列表 (有 0 条评论,494人围观)

还没有评论,来说两句吧...

相关阅读

    相关 javascript 实现滚动

    全屏滚动的过程会逐步优化,从最基本的功能开始。 全屏滚动 每张图都占满整个浏览器窗口,当滑动鼠标或者触摸板时,图片切换。 效果 可以看到,滑动鼠标或者触摸板时,

    相关 js修炼——手写滚动

    全屏滚动是目前网站开发常用的效果,笔者也曾使用过类似插件,但是对此类插件的开发一直抱有强烈兴趣,而今在前人的经验指导下,终于领悟到了一些插件开发的思维。 如下效果: ![2