jQuery单页滚动插件pagePiling.js

所属分类:UI-滚动

 62381  438  查看评论 (4)
分享到微信朋友圈
X
jQuery单页滚动插件pagePiling.js ie兼容8

使用

正如您所看到的示例文件,您将需要包括jquery.pagepiling的JavaScript文件。js(或jquery.pagepiling.min.js简化版)和jquery.pagepiling的css文件.css的插件,以及jQuery。可选地,您可以添加jQuery UI库,以防您想要使用其他效果除了包含在jQuery库的线性或摆动的效果。


包括文件:

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


必需的HTML结构

每个部分包含与一个div定义类。活动部分默认情况下将成为第一个部分,这是作为主页。

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

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

接到部分

为了创建链接到特定的部分,您可以使用一个正常的如果您使用的是pagePiling URL链接。js和锚的链接(使用锚的选择),然后你将能够使用锚的链接也直接导航到特定的部分。例如:http://www.jq22.com/pagePiling/#page2

小心!data-anchor标签不能有相同的值作为任何ID元素在网站上(或者名称元素IE)。

使用一个菜单

菜单链接的活跃部分您将不得不使用菜单选项和利用锚的链接(#)选项部分如下解释。


选项

verticalcenter:(默认正确)垂直中心内的内容部分。

scrollingSpeed:700(默认)滚动转换速度以毫秒为单位。

sectionsColor:(默认没有)为每个部分:定义CSS背景颜色属性的例子:

$('#pagepiling').pagePiling({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
相关插件-滚动

页面过度效果大集合(推荐!)

jQuery页面过度效果大集合
  滚动
 68445  1266

jQuery仿淘宝网右侧悬浮返回顶部和建议代码

jQuery仿淘宝网右侧悬浮返回顶部和建议代码
  滚动
 37734  328

原生js向上滚动消息框

原生js封装的滚动消息框,简单实用
  滚动
 24676  304

仿百度知道(滚动固定标题)插件

仿百度知道滚动固定标题,点击标题滚动到内容块
  滚动
 20003  337

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    雾里看花 0
    2017/4/21 10:27:33
    想问下这个支持手机滑动切换吗? 回复
    兔子爷爷 0
    2016/1/5 12:01:34

    感谢分享,下面demo也写的很详细

    回复
    在路上... 0
    2015/12/11 10:12:44

    谢谢!研究中。。。

    回复
    西瓜 0
    2015/3/15 14:51:33
    这个插件真心不错,在手机上兼容性也很好,感觉比fullpage好! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复