jQuery单页滚动插件pagePiling.js

所属分类:UI-滚动

 70124  466  查看评论 (7)
分享到微信朋友圈
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电商网站楼层滚动定位

jQuery电商网站楼层滚动定位
  滚动
 57199  629

jQuery元素滚动监听插件xRoll.js

xRoll.js 元素滚动监听插件 元素出现在窗口的时候在执行自定义的函数
  滚动
 25272  324

jQuery美化滚动条插件mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义
  滚动
 34353  335

jquery页面滚动定位(支持上下滑动)

jquery页面滚动定位(支持上下滑动)
  滚动
 54837  397

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

    指间轻弹世界 0
    2023/1/7 10:19:40
    最后一屏不是满屏怎么处理
        指间轻弹世界0
        2023/1/7 11:26:44
        已经解决
    回复
      0
    2022/8/20 11:14:57
    手机站上搭配swiper冲突问题,有人知道怎么解决吗
    回复
    雾里看花 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好! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复