建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:15收藏

简介

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


JQuery单页面滚动插件jquery.pagepiling.js-示例图


(下载的附件中附有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