使用
正如您所看到的示例文件,您将需要包括jquery.pagepiling的JavaScript文件。js(或jquery.pagepiling.min.js简化版)和jquery.pagepiling的css文件.css的插件,以及jQuery。可选地,您可以添加jQuery UI库,以防您想要使用其他效果除了包含在jQuery库的线性或摆动的效果。
包括文件:
1 2 3 | <link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" /><script type="text/javascript" src="jquery.pagepiling.js"></script> |
必需的HTML结构
每个部分包含与一个div定义类。活动部分默认情况下将成为第一个部分,这是作为主页。
1 2 3 4 5 6 | <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:
1 2 3 | $(document).ready(function() { $('#pagepiling').pagepiling();}); |
一个更复杂的初始化所有选项设置可以看起来像这样:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $(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背景颜色属性的例子:
1 2 3 | $('#pagepiling').pagePiling({ sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 模仿360首页导航Div排序插件
- 下一个特效： jQuery发牌效果