Image placeholder

pagePiling.js – 全屏滚动jQuery插件

Image placeholder
F2EX 2017-01-17

pagePiling.js 是一个全屏滚动 jQuery 插件,兼容所有现代浏览器,以及一些旧的浏览器,如 Internet Explorer 8,9,Opera 12等。它也可用于触摸设备,如手机或平板电脑。

用法

首先你需要引入 jquery.pagepiling.js(或压缩版本 jquery.pagepiling.min.js )和 css 文件 jquery.pagepiling.css 。你也可以添加jQuery UI库,以便在使用除了包含在 jQuery 库中的其他缓动效果(即线性或摇摆效果)。

引入文件
<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>
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>
初始化
$(document).ready(function() {
    $('#pagepiling').pagepiling();
});

所有选项集的更复杂的初始化如下所示:

$(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(){},
    });
});
链接部分

创建到某个部分的链接,如果你使用带有锚链接的pagePiling.js(使用anchors选项),则可以使用正常的URL链接,那么你也将能够使用锚链接直接导航到某个部分。例如:http://alvarotrigo.com/pagePiling/#page2 。

注意!数据锚标记不能与网站上的任何ID元素(或IE的NAME元素)具有相同的值。

使用菜单

要将菜单链接到活动部分,必须使用菜单选项并使用锚链接(#),如下面选项部分中所述。

创建可滚动部分

如果你想有一个具有很多内容的部分,可为该部分创建一个滚动条,你可以通过添加类 pp-scrollable 到该部分:

<div class="section pp-scrollable"></div>

选项

  • verticalCentered: (默认值 true) 垂直居中的内容部分。
  • scrollingSpeed: (默认值 700) 滚动转换的速度(以毫秒为单位)。
  • sectionsColor:(默认值 none) 为每个部分定义CSS background-color属性:例如:
$('#pagepiling').pagepiling({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
  • anchors: (默认值 []) 定义要在每个部分的网址上显示的锚链接(#example)。也可以通过浏览器使用锚点向前和向后导航。此选项还允许用户将特定部分添加为书签。注意!如果你使用锚点,则它们不能与网站上的任何ID元素(或IE的NAME元素)具有相同的值。

重要:需要理解 anchors 选项数组中的值,通过它在标记中的位置直接与元素的类相关联。

  • easing: (默认值 swing) 定义用于垂直滚动的过渡效果。为了使用除 swinglinear 之外的任何其他转换,它需要 jQuery UI 以使用其他库。
  • loopTop: (默认值 false) 定义是否在第一部分向上滚动,应滚动到最后一个或不滚动。(向上循环滚动)
  • loopBottom: (默认值 false) 定义在最后一部分向下滚动,是否应滚动到第一个或不滚动。(向下循环滚动)
  • css3: (默认值 true). 定义要使用JavaScript或CSS3变换在滚动中。有助于加快平板电脑和移动设备的浏览器对CSS3的支持。如果此选项设置为true,并且浏览器不支持CSS3,则将使用jQuery备选。
  • normalScrollElements: (默认值 null) 如果要避免在滚动某些元素时进行自动滚动,这是你需要使用的选项。 (用于地图,滚动div等)它需要一个字符串的jQuery选择器。(例如: normalScrollElements:'#element1,.element2'
  • normalScrollElementTouchThreshold : (默认值 5) 定义向上html节点树的阈值,pagePiling将测试以查看 normalScrollElements 是否匹配,以允许在触摸设备上div上的滚动功能。(例如: normalScrollElementTouchThreshold:3
  • keyboardScrolling: (默认值 true) 定义是否可以使用键盘导航内容
  • touchSensitivity: (默认值 5) 定义浏览器窗口宽度/高度的百分比,以及滑动在导航到下一个部分时必须测量的距离。
  • animateAnchor: (默认值 true) 定义当给定锚点(#)时,是否将动画滚动到其目标位置,或者将直接加载到给定目标上。
  • direction: (默认值 vertical) 定义滚动是垂直还是水平。
  • menu: (默认值 false) 选择器可用于指定要与内容部分关联的菜单。这样,内容部分的滚动将使用类active激活菜单中的相应元素。这不会生成菜单,但会将 active 类添加到给定菜单中具有相应锚点链接的元素。
    为了将菜单的元素与内容部分相链接,需要使用与在内容部分中的锚链接相同的锚链接的 HTML 5 数据标记(data-menuanchor)。 例:
<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
$('#pagepiling').pagepiling({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

方法

moveSectionUp()

向上滚动一个部分:

$.fn.pagepiling.moveSectionUp();
moveSectionDown()

向下滚动一个部分:

$.fn.pagepiling.moveSectionDown();
moveTo(section)

将页面滚动到给定部分。

/*Scrolling to the section with the anchor link `firstSection`  */
$.fn.pagepiling.moveTo('firstSection');
//Scrolling to the 3rd section in the site
$.fn.pagepiling.moveTo(3);
//Which is the same as
$.fn.pagepiling.moveTo(3);
setAllowScrolling(boolean)

通过使用鼠标滚轮/触控板或触摸手势(默认情况下处于活动状态),添加或删除滚动部分的可能性。

$.fn.pagepiling.setAllowScrolling(false);
setKeyboardScrolling(boolean)

使用键盘箭头键(默认情况下处于活动状态)添加或删除滚动区域的可能性。

$.fn.pagepiling.setKeyboardScrolling(false);
setScrollingSpeed(milliseconds)

定义滚动速度(以毫秒为单位)。

$.fn.pagepiling.setScrollingSpeed(700);

回调

afterLoad (anchorLink, index)

在滚动结束后,在加载节后启动回调。 参数:

  • anchorLink: anchorLink 对应的部分。
  • index: 索引的部分。从1开始。

如果没有在插件中定义anchorLinks,则index参数将是唯一要使用的参数。
示例:

$('#pagepiling').pagepiling({
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

        afterLoad: function(anchorLink, index){
            //using index
            if(index == 3){
                alert("Section 3 ended loading");
            }

            //using anchorLink
            if(anchorLink == 'secondPage'){
                alert("Section 2 ended loading");
            }
        }
    });
onLeave (index, nextIndex, direction)

在用户离开某个部分时,在转换到新部分时触发此回调。
参数:

  • index: 离开部分的索引。从1开始。
  • nextIndex: 目标部分的索引。从1开始。
  • direction: 它将取值updown取决于滚动方向。

示例:

$('#pagepiling').pagepiling({
        onLeave: function(index, nextIndex, direction){
            //after leaving section 2
            if(index == 2 && direction =='down'){
                alert("Going to section 3!");
            }

            else if(index == 2 && direction == 'up'){
                alert("Going to section 1!");
            }
        }
    });
afterRender()

这个回调是在页面结构生成之后触发的。这是要用来初始化其他插件或触发任何需要文档准备就绪的代码的回调(因为此插件修改DOM以创建结果结构)。
示例:

$('#pagepiling').pagepiling({
        afterRender: function(){
            alert("The resulting DOM structure is ready");
        }
    });

2017-08-11