简介

pagepiling.js是一个可以创建类似窗帘滚动网站的jQuery插件。它是灵活的，旧的浏览器和触摸设备兼容。您可以在原来的滚动的网站的基础上使用这个插件创建一个。 

（下载的附件中附有DEMO）

 使用

1.  引入文件

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

说明：您可以添加jQuery UI库,以防您想要使用其他效果除了包含在jQuery库的线性或摆动的效果。

2.  HTML

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

3.  调用

初始化：

$(document).ready(function() {
    $('#pagepiling').pagepiling();
});

更复杂的初始化所有选项设置可以看起来像这样：

$(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(){},
    });
});

相关链接

GitHub 地址 ：https://github.com/alvarotrigo/pagePiling.js/

在线演示 ：https://www.jq22.com/yanshi573