文档章节

全屏滚动插件pagePiling.js

r
 raykaeso
发布于 2016/04/07 14:30
字数 345
阅读 15
收藏 0
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验。pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果。支持所有的主流浏览器,包括IE8+,支持移动设备。

1、引入jquery.js、pagePiling.js、jquery.pagepiling.css文件
[cc lang="html" escaped="true"]<link rel="stylesheet" href="css/jquery.pagepiling.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>[/cc]

2、HTML代码如下给几个section类的div
[cc lang="html" escaped="true"]<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>[/cc]

3、$('#pagepiling')调用pagepiling()方法
[cc lang="javascript" escaped="true"]$(function(){
$('#pagepiling').pagepiling();
});[/cc]

//pagePiling所有参数的应用实例
[cc lang="javascript" escaped="true"]$(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(){},
});
});[/cc]

本文转载自:https://www.leixuesong.com/543

r
粉丝 1
博文 69
码字总数 484
作品 0
武汉
个人站长
私信 提问
30款jQuery常用网页焦点图banner图片切换 下载

1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3、jQuery图片层叠旋转类似洗牌翻转图片幻灯片 查看演示 ...

awbeci
2013/09/18
0
0
jQuery全屏滚动插件FullPage.js中文帮助文档API

七牛最近改版了网站,弄成全屏滚动的特效,真的很炫,于是查看其源代码,发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很...

Jack088
2016/08/08
254
0
06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比...

aicoder
2018/01/03
0
0
PDF软件推荐——Sumatra PDF - imsoft.cnblogs

Sumatra PDF 优点:绿色,小巧,快速,支持格式丰富 缺点:不支持修改和添加标记 链接: http://pan.baidu.com/s/1eQ1s3Nc 密码: d8h6 主页:http://www.sumatrapdfreader.org/manual-cn.htm...

imzdx
2014/04/03
0
0
FullPage.js全屏插件文档及使用方法

简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站 下载地址 下载地址 相关示例:基于fullpage.js实现的360全屏滑动效果 支持功能 支持鼠标滚动 支持前...

哈你真皮
2018/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

zk中选举Leader时的网络IO QuorumCnxManager解析

每台服务启动过程中,会启动一个QuorumCnxManager,负责各台服务器之间底层Leader选举过程中的网络通信 当集群中有服务器服务中断时,zk会重新选举leader 内部类 Message定义消息结构 包含了...

writeademo
27分钟前
2
0
使用mdBook 替代 gitbook。

为什么要替代gitbook gitbook 有个模板问题:如果md文件中有连续的大括号(比如:&{{父亲 40}}),gitbook会把{{ 父亲 40 }}中的父亲 40当做一个模板变量。如果这个变量不存在,会报错 Temp...

王坤charlie
30分钟前
3
0
TL-A7HSAD采集卡硬件的处理器、NOR FLASH、DDR3

TL-A7HSAD是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的高速数据采集卡,可配套广州创龙TMS320C6655、TMS320C6657、TMS320C6678开发板使用。该采集卡包含1个双通道250MSPS*12Bit的高...

Tronlong创龙
42分钟前
3
0
项目启动报fastjson版本可能过低

进行项目启动的过程中,之前都正常,这次启动突然就失败了: 查看日志说的是版本过低,后来查看官方网站版本,替换了最新版本: 选择了最新版本的1.2.60,1.2.62尝试后都不行,后来查看网上搜...

aiChuang
42分钟前
3
0
McDonald’s is using Alexa and Google to accepting job applications

McDonald’s today announced a new initiative the fast food chain is calling the “Apply Thru,” in which owners of Amazon Alexa or Google Assistant devices can begin job applic......

wowloop
46分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部