全屏滚动插件pagePiling.js

付费节点推荐

免费节点

节点使用教程

全屏滚动效果是最近非常流行的网页设计形式，带给用户良好的视觉和交互体验。pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器，包括IE8+，支持移动设备。

1、引入jquery.js、pagePiling.js、jquery.pagepiling.css文件

1
2
3
<link rel="stylesheet" href="css/jquery.pagepiling.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>

2、HTML代码如下给几个section类的div

1
2
3
4
5
6
<div id="pagepiling">
<div class="section"><h3>第一屏</h3></div>
<div class="section"><h3>第二屏</h3></div>
<div class="section"><h3>第三屏</h3></div>
<div class="section"><h3>第四屏</h3></div>
</div>

3、$(‘#pagepiling’)调用pagepiling()方法

1
2
3
$(function(){
$('#pagepiling').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
31
$(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(){},
});
});

未经允许不得转载：Bcoder资源网 » 全屏滚动插件pagePiling.js

相关推荐

赞 (0)
分享到：更多 ()
标签：

相关推荐

评论 0

评论前必须登录！

登陆 注册