全屏滚动插件pagePiling.js

全屏滚动效果是最近非常流行的网页设计形式，带给用户良好的视觉和交互体验。pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器，包括IE8+，支持移动设备。

1、引入jquery.js、pagePiling.js、jquery.pagepiling.css文件
[cc lang="html" escaped="true"]<link rel="stylesheet" href="css/jquery.pagepiling.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>[/cc]

2、HTML代码如下给几个section类的div
[cc lang="html" escaped="true"]<div id="pagepiling">
<div class="section"><h3>第一屏</h3></div>
<div class="section"><h3>第二屏</h3></div>
<div class="section"><h3>第三屏</h3></div>
<div class="section"><h3>第四屏</h3></div>
</div>[/cc]

3、$('#pagepiling')调用pagepiling()方法
[cc lang="javascript" escaped="true"]$(function(){
$('#pagepiling').pagepiling();
});[/cc]

//pagePiling所有参数的应用实例
[cc lang="javascript" escaped="true"]$(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(){},
});
});[/cc]