插件描述：pagepiling.js是一个可以创建类似窗帘滚动网站的jQuery插件。它是灵活的，旧的浏览器和触摸设备兼容。您可以在原来的滚动的网站的基础上使用这个插件创建一个。
使用
正如您所看到的示例文件,您将需要包括jquery.pagepiling的JavaScript文件。js(或jquery.pagepiling.min.js简化版)和jquery.pagepiling的css文件.css的插件,以及jQuery。可选地,您可以添加jQuery UI库,以防您想要使用其他效果除了包含在jQuery库的线性或摆动的效果。
包括文件:
<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>
必需的HTML结构
每个部分包含与一个div定义类。活动部分默认情况下将成为第一个部分,这是作为主页。
<div id="pagepiling"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
初始化
所有您需要做的是调用插件在$(document).ready function:
<script>
$(document).ready(function() {
$('#pagepiling').pagepiling();
});
</script>
一个更复杂的初始化所有选项设置可以看起来像这样:
<script>
$(document).ready(function() {
$('#pagepiling').pagePiling({
menu: null,
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(){},
});
});
</script>
接到部分
为了创建链接到特定的部分,您可以使用一个正常的如果您使用的是pagePiling URL链接。js和锚的链接(使用锚的选择),然后你将能够使用锚的链接也直接导航到特定的部分。例如:http://www.jq22.com/pagePiling/#page2
小心!data-anchor标签不能有相同的值作为任何ID元素在网站上(或者名称元素IE)。
使用一个菜单
菜单链接的活跃部分您将不得不使用菜单选项和利用锚的链接(#)选项部分如下解释。
选项
verticalcenter:(默认正确)垂直中心内的内容部分。
scrollingSpeed:700(默认)滚动转换速度以毫秒为单位。
sectionsColor:(默认没有)为每个部分:定义CSS背景颜色属性的例子:
<script>
$('#pagepiling').pagePiling({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
</script>
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); |
原文参考：
http://www.jq22.com/jquery-info573
http://www.leixuesong.cn/550
文章评论