当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容

全屏滚动插件pagePiling.js

减小字体 增大字体 作者：佚名  来源：网上搜集  发布时间：2019-1-4 8:50:08

-->

全屏滚动效果是最近非常流行的网页设计形式，带给用户良好的视觉和交互体验。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(){},
});
});


全屏滚动插件pagePiling.js



[] [返回上一页] [打 印]

文章评论评论内容只代表网友观点，与本站立场无关！