当前位置: 首页 > 工具软件 > pagePiling.js > 使用案例 >

【jQuery插件】pagepiling滚屏插件使用

富锦
2023-12-01

       pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现全屏滚动效果。

       支持所有的主流浏览器,包括IE8+,支持移动设备。下面详细讲解下pagePiling.js的使用步骤。

       1.引入相关文件

   <link rel="stylesheet" href="js/jquery.pagepiling.css">
   <script src="js/jquery-1.11.1.min.js"></script>
   <script src="js/jquery.pagepiling.min.js"></script>

      2.html中加入

  <div id="pagepiling">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
 </div>

    3.javaScript中调用

 $(document).ready(function(){
	$('#pagepiling').pagepiling({
		loopBottom:true,
		navigation:{
		    'position': 'left',
	            'tooltips': ['第一屏','第二屏','第三屏','第四屏','第五屏']
		}
	});
 });

   4.其它可设置参数说明

属性/方法类型默认值说明
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){}

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

转载于:https://www.cnblogs.com/zachary93/p/6123073.html

 类似资料: