文档章节

FullPage.js 全屏滚动插件

hey--老妖
 hey--老妖
发布于 2017/03/22 17:36
字数 1476
阅读 51
收藏 1

FullPage.js是一个基于jQuery的插件,它能够很方便的、很轻松的制作出全屏网站。主要功能有:

支持鼠标滚动

多个回调函数

支持手机、平板触摸事件

支持css3动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等。

1、可通过 https://cdnjs.com/

查找插入以下文件

也可以插入幻灯片哦!

fullpage配置项

滚动

easing:
/*定义页面section滚动的动画方式,默认值为easeInOutCubic,如果修改的话,需要引入jquery.easing.js插件或jQuery ui*/

css3:true,  
/*是否使用css3 transforms来实现滚动效果,默认为true。这个配置项可以提高支持css3的浏览器,比如移动设备等的速度,如果浏览器不支持css3,则会使用jQuery来替代css3实现滚动效果。*/

loopTop:true,             
/*滚动到最顶部后是否连续滚动到底部,默认值为false。*/

loopBottom:true,           
/*滚动到最底部后是否连续滚动回到顶部,默认值为false。*/

loopHorizontal:true,       
/*横向slider幻灯片是否循环滚动,默认值为true*/

autoScrolling:false,

/*是否使用插件的滚动方式,默认值为true,如果选择false,则会出现浏览器自带的滚动条*/

scrollBar:true,

/*是否包含滚动条,默认为false,感觉这个没有什么效果*/

paddingTop:"100px",           paddingBottom:"0px",

/*设置每一个section顶部和底部的padding*/

paddingTop:"100px",           paddingBottom:"0px",

/*设置每一个section顶部和底部的padding*/

fixedElements:"#header",   /*固定头部*/

<div id="header">hello</div>

#header{
			position: fixed;
			font-size: 30px;
			top: 0;
			right: 150px;
			background: black;
		}

keyboardScrolling:true,    

/*是否可以使用键盘方向键导航,默认为true*/
touchSensitivity:100,    

在移动设备中滑动页面的敏感性,默认为5,按百分比来衡量,最高为100,越大则越难滑动。
continuousVertical:true,      
/*是否循环滚动,默认为false,这个属性和loopTop、loopBottom不能同时设置,且不会像它们一样跳动*/
animateAnchor:false,
recordHistory:true,      
   

/*是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。*/
 

<ul id="fullpageMenu">
		<li data-menuanchor="page1" class="active"><a href="#page1">1section</a></li>
		<li data-menuanchor="page2" ><a href="#page2">2section</a></li>
		<li data-menuanchor="page3" ><a href="#page3">3section</a></li>
		<li data-menuanchor="page4" ><a href="#page4">4section</a></li>
	</ul>

anchors:['page1','page2','page3','page4'],
 menu:#fullpageMenu,  

 /*绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jQuery选择器*/

navigation:true, 

/*是否显示导航,默认为false。如果设置true,会显示小圆点,作为导航*/,也就是以下结果;

navigationPosition:"left",    

/*导航小圆点的位置,可以设置为left或者right*/
navigationTooltips:['page1','page2','page3','page4'],

/*导航小圆点的tooltips设置,默认为[],注意按照顺序设置*/ 结果如下:

showActiveTooltip:false,      

/*是否显示当前页面的导航的tooltip信息,默认为false*/
 slidesNavigation:true,       

/*是否显示横向黄灯片的导航,默认为false*/
slidesNavPosition:"bottom",      

/*横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom*/ 结果如下:

scrollOverflow:false,          
/*内容超过满屏后是否显示滚动条,默认为false 如果设置true,则需要引入jQuery.slimscroll插件才能看到内容*/
sectionSelector:".section",     

/*section的选择器,默认为.section,通过这样的方式更改选择器的名字*/
slideSelector:".slide",          

/*slide的选择器,默认为.slide,通过这样的方式更改选择器的名字*/

 

fullpage方法

moveSectionUp()            /*向上滚动一页*/
moveSectionDown()        /*向下滚动一页*/
直接在浏览器里调试

moveTo(section,slide)      /*滚动到第几页,第几个幻灯片,注意,页面是从1开始,而幻灯片是从0开始*/

silentMoveTo(section,slide)         /*滚动到第几页,和moveTo一样,但是没有动画效果*/
moveSlideRight()                         /*幻灯片向右滚动*/
moveSlideLeft()                            /*幻灯片向左滚动*/

setAutoScrolling(boolean)             /*动态设置autoScrolling*/
setLockAnchors(boolean)              动态设置lockAnchors
setRecordHistory(boolean)             动态设置recordHistory
setScrollingSpeed(milliseconds)        动态设置scrollingSpeed

 

setAllowScrolling(boolean,[directions]) 

添加或删除鼠标滚轮/滑动控制,第一个参数true为启用,false为禁用,后面的参数为方向,取值包含all,up,down,left,right,可以使用多个逗号分隔。

它有什么作用呢?比如我们在做一个星座测试的时候,当做好前面的题后不想让用户滚动到前面看答案,就可以用这种方法。

 

destroy(type),

/*销毁fullpage特效,type可以不写,或者使用all,不写type,fullpage给页面添加的样式和HTML元素还在,出现滚动条。如果使用all,则样式、html等全部销毁*/


reBuild(),

/*重新更改页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果*/

 

图片:

效果一样

 

视频:播放不了的感觉


回调:

afterLoad:function(anchorLink,index){

                    /*把参数值打印出来*/
                    console.log("afterLoad:anchorLink="+anchorLink+";index="+index);
                } 

/*滚动到某一section,且滚动结束后,会触发一次此回调函数,函数接收anchorLink和index两个参数,anchorLink是锚链接的名称,index是序号,从1开始计算。*/

每滚动一次会出现一条数据

 

onLeave:function(index,nextIndex,direction){
                    console.log("onLeave:index="+index+";nextIndex="+nextIndex+";direction="+direction)
                },


/*在我们离开一个section时,会触发一次此回调函数,接收index、nextIndex和direction 3个参数:
                index是离开的“页面”的序号,从1开始计算;
                nextIndex是滚动到的目标,“页面”的序号,从1开始计算;
                direction判断往上滚动还是往下滚动,值是up或down
                通过return false;可以取消滚动*/
                

afterRender:function(){
                    console.log("afterRender");
                },

                afterResize:function(){
                    console.log("afterResize");
                },

 

 

afterSlideLoad(anchorLink,index,slideAnchor,slideIndex),
/*滚动到某一幻灯片后的回调函数,与afterLoad类似,接收4个参数*/


onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex),
/*在离开一个slide时,触发一次此回调函数,与onLeave类似,接收anchorLink,index,slideIndex,direction 4个参数*/

© 著作权归作者所有

共有 人打赏支持
上一篇: 响应式
hey--老妖
粉丝 3
博文 38
码字总数 21133
作品 0
潮州
前端工程师
私信 提问
加载中

评论(5)

我勒个屮艸芔茻
我勒个屮艸芔茻

引用来自“hey--老妖”的评论

引用来自“MrMonkey”的评论

厉害了 word姐

回复@MrMonkey : 发现了这个神奇的东西
很多单页都是用这个做的
hey--老妖
hey--老妖

引用来自“MrMonkey”的评论

厉害了 word姐

回复@MrMonkey : 发现了这个神奇的东西
我勒个屮艸芔茻
我勒个屮艸芔茻
厉害了 word姐
hey--老妖
hey--老妖

引用来自“伟杰_”的评论

不错!

回复@伟杰_ : 😂还在更新
伟杰_
伟杰_
不错!
fullpage下的navigationColor设置后没有反应。

文件来源github https://github.com/alvarotrigo/fullPage.js html引入 代码如下: $(function(){ $('#fullpage').fullpage({ 'verticalCentered': false, 'css3': true, 'sectionsColor': ......

别慌
2015/04/27
1K
1
VUE 引入 fullpage 失败

1.0 全局引入 jq 2.0 组建因引入 fullpage.js fullpage.css 3.0 $('#fullpage').fullpage() 报错 is not a function 为何...

Z_momo
2017/07/27
90
0
OSChina 技术周刊第十八期 —— 2015 年 OSC 源创会行程计划

每周技术抢先看,总有你想要的! 移动开发 【软件】开源 Android ORM 框架 OpenDroid 【博客】自己动手做推送 前端开发 【软件】jQuery 全屏滚动插件 fullPage.js 服务端开发/管理 【软件】W...

OSC编辑部
2015/01/18
0
0
OSChina 技术周刊第十八期

每周技术抢先看,总有你想要的! 移动开发 【软件】开源 Android ORM 框架 OpenDroid 【博客】自己动手做推送 前端开发 【软件】jQuery 全屏滚动插件 fullPage.js 服务端开发/管理 【软件】W...

OSC编辑部
2015/01/18
460
0
FullPage.js全屏插件文档及使用方法

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

哈你真皮
2018/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何开发一款以太坊(安卓)钱包系列2 - 导入账号及账号管理

这是如何开发一款以太坊(安卓)钱包系列第2篇,如何导入账号。有时用户可能已经有一个账号,这篇文章接来介绍下,如何实现导入用户已经存在的账号。 导入账号预备知识 从用户需求上来讲,导...

Tiny熊
今天
2
0
intellJ IDEA搭建java+selenium自动化环境(maven,selenium,testng)

1.安装jdk1.8; 2.安装intellJ; 3.安装maven; 3.1 如果是单前用户,配置用户环境变量即可,如果是多用户,则需配置系统环境变量,变量名为MAVEN_HOME,赋值D:\Application\maven,往path中...

不最醉不龟归
今天
3
0
聊聊ShenandoahGC的Brooks Pointers

序 本文主要研究一下ShenandoahGC的Brooks Pointers Shenandoah Shenandoah面向low-pause-time的垃圾收集器,它的GC cycle主要有 Snapshot-at-the-beginning concurrent mark包括Init Mark(P......

go4it
昨天
3
0
Makefile通用编写规则

#简单实用的Makefile模板: objs := a.o b.o test:$(objs) gcc -o test $^ # .a.o.d .b.o.d dep_files := $(foreach f,$(objs),.$(f).d) dep_files := $(wildcard $(dep_files)) ifneq ($(d......

shzwork
昨天
2
0
《万历十五年》的读后感作文4000字

《万历十五年》的读后感作文4000字: 万历十五年,即1587年,距今已过去432年。在明朝276的历史中,这一年很平淡,并没有什么特别之处。黄仁宇的《万历十五年》一书,有别于其他的历史叙述方...

原创小博客
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部