JQuery单页面滚动插件jquery.pagepiling.js

简介

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