新版设计导航上线了,新的界面,好记的域名(5iux.cn),欢迎收藏!

jQuery单页滚动插件pagePiling.js

代码 D. Young 768℃ 0评论

pc-0f35782e-4526-11e4-95f3-00163e001348 8

 

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

下载链接:https://github.com/alvarotrigo/pagePiling.js

Demo演示:http://alvarotrigo.com/pagePiling/

使用

正如您所看到的示例文件,您将需要包括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:

<script> 
$(document).ready(function() {
 $('#pagepiling').pagepiling();
});
</script>

一个更复杂的初始化所有选项设置可以看起来像这样:

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

接到部分

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

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

使用一个菜单

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

选项

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

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

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

 <script>
$('#pagepiling').pagePiling({
 sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
</script>

1、pagePiling.js配置选项

属性/方法 类型 默认值 说明
menu 字符串 null 绑定菜单
direction 字符串 vertical 滚动方向,可选 vertical(垂直/竖向) 或 horizontal(水平/横向)
verticalCentered 布尔值 true 内容垂直居中
sectionsColor 数组 [] “每一屏”的背景颜色
anchors 数组 [] 锚链接名称
scrollingSpeed 整数 700 动画时间
easing 字符串 swing 动画方式
loopBottom 布尔值 false 滚动到底部后循环滚动
loopTop 布尔值 false 滚动到顶部后循环滚动
css3 布尔值 true 使用 css3 动画,如果浏览器不支持,则自动推到 js 动画
navigation 对象 定义导航文字颜色、背景颜色、位置和 tooltip
normalScrollElements 字符串 null 避免在某些元素上自动滚动,如地图,有滚动条的 div 等
normalScrollElementTouchThreshold 整数 5 设定一个阈值,以便在移动设备上滑动定义了 normalScrollElements 的元素
touchSensitivity 整数 5 触摸灵敏度
keyboardScrolling 布尔值 true 使用键盘控制
sectionSelector 字符串 .section 每一屏的选择器
animateAnchor 布尔值 false 是否以动画的方式滚动到某一个锚链接
afterRender 页面初始化后的回调函数
onLeave 滚动前的回调函数
function(index, nextIndex, direction){}
afterLoad 滚动后的回调函数
function(anchorLink, index){}

2、pagePiling.js自定义方法

名称 说明
moveSectionUp() 向上滚动,使用方法:
$.fn.pagepiling.moveSectionUp();
moveSectionDown() 向下滚动,使用方法:
$.fn.pagepiling.moveSectionDown();
moveTo(section) 滚动到某一屏,使用方法:
$.fn.pagepiling.moveTo(3);
或者:
$.fn.pagepiling.moveTo(‘page3′);
setAllowScrolling(boolean) 允许/禁止滚动,使用方法:
$.fn.pagepiling.setAllowScrolling(false);
setKeyboardScrolling(boolean) 启用/禁止键盘控制,使用方法:
$.fn.pagepiling.setKeyboardScrolling(false);
setScrollingSpeed(milliseconds) 设置动画时间,使用方法:
$.fn.pagepiling.setScrollingSpeed(800);

 

原文参考:

http://www.jq22.com/jquery-info573

http://www.leixuesong.cn/550

 

转载请注明:DY点线面 » jQuery单页滚动插件pagePiling.js

喜欢 (5)

您必须 登录 才能发表评论!