js全屏滚动插件API,整屏滚动插件fullPage使用

说到滚屏插件,我主要接触过touchSwipe和FullPage,两者各有优点吧。就我个人认为,前者更加适合新手,简单,易上手;后者适合高端的开发者。

图片 1pc-a3e1637a-7960-11e4-bf1d-00163e001348.png

时间: 2018-03-23阅读: 788标签: 全屏fullPage.js 是一个基于 jQuery
的插件,它能够很方便、很轻松的制作出全屏网站。
主要功能有:支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件支持
CSS3
动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等API

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。

作为前端开发,页面修改是难免的,这不本来好好地首页,UI妹子告知首页需要调整整屏滚动,没办法只能修改了(可惜了之前为了视差滚动写的代码了);虽说这类交互,手写代码对自己最有利了,可是为了开发效率所以利用插件了,毕竟一个优秀的插件功能是很齐全的,使用起来是方便的很哪!因此我就开始寻找理想的中的插件了,找了好几款,也使用了下,最终觉得这个fullPage是最能满足当前这个需求的了,因此就它了。先简单介绍下它有哪些功能:

sectionsColor:[‘green’,’orange’,’red’,’lime’];//设置背景颜色可以为每一个section设置background-color属性

今天主要想给大家介绍的是FullPage了,如何实现全屏滚动且实现视觉差效果,至于touchSwipe以后也会讲到。

支持鼠标滚动、前进后退和键盘控制、多个回调函数、支持手机和平板触摸事件、支持
CSS3
动画、支持窗口缩放、窗口缩放时自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式总的来说功能挺齐全的,而且使用起来也是很方便。

controlArrows:定义是否通过箭头来控制slide幻灯片,默认为true,当我们设置为false,则幻灯片左右的箭头消失,在移动端上我们可以通过滑动来控制幻灯片

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

引入文件:fullPage是基于jquery编写的,所以必须引入了jquery了,我们还需要入jquery.easings.min.js,它是必须的,用于
easing 参数,或者也可以使用完整的 jQuery UI
代替,最后就是fullPag本身了,还有就是引入它的css文件了,引入代码如下:

verticalCentered:每一页的内容是否垂直居中,默认为true

支持前进后退和键盘控制

<link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><script src="js/jquery.easings.min.js"></script><script src="js/jquery.fullPage.js"></script>

resize:字体是否随着窗口缩放而缩放,默认为false

支持手机、平板触摸事件

HTML写法:

scrollingSpeed:滚动速度,单位为毫秒,默认为700

支持 CSS3 动画

<div > <div >第一屏</div> <div >第二屏</div> <div >第三屏</div> <div >第四屏</div></div>

anchors:定义锚链接,默认值是[]。有了锚链接,用户可以快速打开定位到某一页面。注意定义锚链接的时候,值不要和页面中任意的id或name相同,尤其在IE下,而且定义时不需要加#

窗口缩放时自动调整

JS写法:

lockAnchors:是否锁定锚链接,默认为false,若设置为true,则定义的锚链接就没有效果,使用较少

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

$(function(){ $('#fullpage').fullpage;

easing:定义页面section滚动的动画方式,默认为easeInOutCubic,如果修改则需引入jquery.easings插件,或者jquery
ui.

兼容性 jQuery 兼容:

这样写就完成了,整屏滚动效果就出来了!

css3:是否使用CSS3
transforms来实现滚动效果,默认为true。可提高支持css3的浏览器(如移动设备等的速度),若浏览器不支持css3,则会使用jquery来代替css3实现滚动效果。(传说中的优雅降级)

兼容 jQuery 1.7+

先说几个常用的:页面滑动速度:scrollingSpeed是否显示导航栏:navigation
多说一句(一般的整屏滚动页面,按开发人员意识交互增强,而按使用者交互就少,所以这种整屏滚动的最后要加上导航栏,否则容易使使用者迷路)。回调函数:conLeave
— 滚动前调用回调函数afterLoad — 滚动到某一屏后的回调函数代码:

loopTop:滚动到最顶部后是否连续滚动到底部,默认false

浏览器兼容:

$(function(){ $('#fullpage').fullpage({ 'navigation': true, onLeave: function(anchorLink, index){ if{ console.log; console.log); $.removeClass('top-bottom').addClass('top-top'); $('.nav-search').show(); }else{ $('.nav-search').hide(); $.removeClass('top-top').addClass('top-bottom'); } }, }); });

loopBottom:滚动到最底部后是否连续滚动回顶部,默认false

IE8/谷歌/火狐/Opera/苹果浏览器

完整补充:

loopHorizontal:横向slide幻灯片是否循环滚动,默认为true

使用方法 1、引入文件:

名称 |类型| default |说明—|—|—verticalCentered |字符串| true
|内容是否垂直居中verticalCentered |字符串 |true |内容是否垂直居中resize
|布尔值 |false |字体是否随着窗口缩放而缩放slidesColor |函数 |无
|设置背景颜色anchors |数组 |无 |定义锚链接scrollingSpeed |整数 |700
|滚动速度,单位为毫秒easing |字符串 |easeInQuart |滚动动画方式menu
|布尔值 |false |绑定菜单,设定的相关属性与 anchors
的值对应后,菜单可以控制滚动navigation |布尔值 |false
|是否显示项目导航navigationPosition |字符串 |right |项目导航的位置,可选
left 或 rightnavigationColor |字符串 |#000
|项目导航的颜色navigationTooltips |数组| 空 |项目导航的
tipslidesNavigation |布尔值 |false
|是否显示左右滑块的项目导航slidesNavPosition |字符串 |bottom
|左右滑块的项目导航的位置,可选 top 或 bottomcontrolArrowColor |字符串
|#fff |左右滑块的箭头的背景颜色loopBottom |布尔值 |false
|滚动到最底部后是否滚回顶部loopTop |布尔值 |false
|滚动到最顶部后是否滚底部loopHorizontal |布尔值 |true
|左右滑块是否循环滑动autoScrolling |布尔值 |true
|是否使用插件的滚动方式,如果选择
false,则会出现浏览器自带的滚动条scrollOverflow |布尔值 |false
|内容超过满屏后是否显示滚动条css3 |布尔值 |false |是否使用 CSS3
transforms 滚动paddingTop |字符串 |0 |与顶部的距离paddingBottom |字符串|
0 |与底部距离fixedElements |字符串 |无 |normalScrollElements | |无
|keyboardScrolling |布尔值 |true |是否使用键盘方向键导航touchSensitivity
|整数 |5 |continuousVertical |布尔值 |false |是否循环滚动,与 loopTop 及
loopBottom 不兼容animateAnchor |布尔值| true
|normalScrollElementTouchThreshold |整数| 5|

autoScrolling:是否使用插件的滚动方式,默认为true,变为false则会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认行为来滚动

2、HTML:

名称 |方法—|—|—moveSectionUp() |向上滚动moveSectionDown()
|向下滚动moveTo(section, slide) |滚动到moveSlideRight() |slide
向右滚动moveSlideLeft() slide |向左滚动setAutoScrolling()
|设置页面滚动方式,设置为 true 时自动滚动setAllowScrolling()
|添加或删除鼠标滚轮/触控板控制setKeyboardScrolling()
|添加或删除键盘方向键控制setScrollingSpeed() |定义以毫秒为单位的滚动速度

scrollBar:是否包含滚动条,默认为false。设置为true,则出现浏览器自带的滚动条,页面滚动还是按页滚动,但滚动条的默认行为也有效

   这里是第一竖屏 This is section1     这里是第二竖屏 This is section2     这里是第三竖屏 This is section3     这里是第四竖屏 This is section4  

名称 |方法—|—|—afterLoad |滚动到某一屏后的回调函数,接收
anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index
是序号,从1开始计算onLeave |滚动前的回调函数,接收 index、nextIndex 和
direction 3个参数:index 是开的“页面”的序号,从1开始计算;nextIndex
是滚动到的“页面”的序号,从1开始计算direction
判断往上滚动还是往下滚动,值是 up 或 down。afterRender
|页面结构生成后的回调函数,或者说页面初始化完成后的回调函数afterSlideLoad
|滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收
anchorLink、index、slideIndex、direction 4个参数onSlideLeave
|某一水平滑块滚动前的回调函数,与 onLeave 类似,接收
anchorLink、index、slideIndex、direction 4个参数

paddingTop/paddingBottom:设置每一个section顶部和底部的padding,默认都是0。一般如果需要设置一个固定在顶部或者底部的菜单、导航、元素等,可以使用这两个配置项。

每个page代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的
page 加上 class=”current”,如:

fixedElements:固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素固定不动。

3、Javascript:

keyboardScrolling:是否可以使用键盘方向键导航,默认为true。

var interval;runSection = new FullPage({ id : 'article', // id of contain slideTime : 800, // time of slide effect : { // slide effect transform : { translate : 'Y', // 'X'|'Y'|'XY'|'none' scale : [0, 1], // [scalefrom, scaleto] rotate : [0, 0] // [rotatefrom, rotateto] }, opacity : [0, 1] // [opacityfrom, opacityto] }, mode : 'touch,wheel', // mode of fullpage easing : [0, .93, .39, .98], callback : function { // callback when pageChange clearTimeout;

touchSensitivity:在移动设备中滑动页面的敏感性,默认为5,是按百分比来衡量,最高为100,越大滑动越难

环境配置 1、属性

continuousVertical:是否循环滚动,默认为false。如果为true,则页面会循环滚动,它不会像loopTop和loopBottom那样出现跳动。(它和loopTop、loopBottom不兼容,不要同时设置)

选项

animateAnchor:锚链接是否可以控制滚动动画,默认为true。若为false,则通过锚链接定位到某个页面显示不再有动画效果。

类型

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

默认值

如果设置了autoScrolling:false,那么这个配置也将被关闭。

说明

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

verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false
字体是否随着窗口缩放而缩放 slidesColor 函数 无 设置背景颜色 anchors 数组
无 定义锚链接 scrollingSpeed 整数 700 滚动速度,单位为毫秒 easing 字符串
easeInQuart 滚动动画方式 menu 布尔值 false 绑定菜单,设定的相关属性与
anchors 的值对应后,菜单可以控制滚动 navigation 布尔值 false
是否显示项目导航 navigationPosition 字符串 right 项目导航的位置,可选
left 或 right navigationColor 字符串 #000 项目导航的颜色
navigationTooltips 数组 空 项目导航的 tip slidesNavigation 布尔值 false
是否显示左右滑块的项目导航 slidesNavPosition 字符串 bottom
左右滑块的项目导航的位置,可选 top 或 bottom controlArrowColor 字符串
#fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false
滚动到最底部后是否滚回顶部 loopTop 布尔值 false 滚动到最顶部后是否滚底部
loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值
true 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条
scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条 css3 布尔值
false 是否使用 CSS3 transforms 滚动 paddingTop 字符串 0 与顶部的距离
paddingBottom 字符串 0 与底部距离 fixedElements 字符串 无
normalScrollElements 无 keyboardScrolling 布尔值 true
是否使用键盘方向键导航 touchSensitivity 整数 5 continuousVertical 布尔值
false 是否循环滚动,与 loopTop 及 loopBottom 不兼容 animateAnchor 布尔值
true normalScrollElementTouchThreshold 整数 5 2、方法

navigation:是否显示导航,默认false。若为true,会显示小圆点作为导航

名称

navigationPosition:导航小圆点的位置,可以设置为left或者right。

说明

navigationTooltips:导航小圆点的tooltips设置,默认为[],注意按照顺序设置。

moveSectionUp() 向上滚动 moveSectionDown() 向下滚动 moveTo 滚动到
moveSlideRight() slide 向右滚动 moveSlideLeft() slide 向左滚动
setAutoScrolling() 设置页面滚动方式,设置为 true 时自动滚动
setAllowScrolling() 添加或删除鼠标滚轮/触控板控制 setKeyboardScrolling()
添加或删除键盘方向键控制 setScrollingSpeed() 定义以毫秒为单位的滚动速度
3、回调函数

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

名称

slidesNavigation:是否显示横向幻灯片的导航,默认为false

说明

slidesNavPosition:横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom

afterLoad 滚动到某一屏后的回调函数,接收 anchorLink 和 index
两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算 onLeave
滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index
是离开的“页面”的序号,从1开始计算;

scrollOverflow:内容超过满屏后是否显示滚动条,默认为false.若设置为true,则会显示滚动条,如果要滚动查看内容,还需要jquery.slimscroll插件的配合。slimscroll插件主要用于模拟传统的浏览器滚动条。

nextIndex 是滚动到的“页面”的序号,从1开始计算;

sectionSelector:section的选择器,默认为.section。

direction 判断往上滚动还是往下滚动,值是 up 或 down。

slideSelector:slide的选择器,默认为.slide。

afterRender 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数
afterSlideLoad 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收
anchorLink、index、slideIndex、direction 4个参数 onSlideLeave
某一水平滑块滚动前的回调函数,与 onLeave 类似,接收
anchorLink、index、slideIndex、direction 4个参数

方法

我们可以看下案例:DEMO

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等全部销毁,页面恢复和不使用fullpage相同的效果。

reBuild():重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果。

Lazy Loading图片:

 img data-src="image.png"

视频:

 video source data-src="video.webm" type="video/webm"/ source data-src="video.mp4" type="video/mp4"/ /video 用data-src代替src就可以实现延迟加载图片。

回调函数

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

我们可以根据 anchorLink 和 index 参数值的判断,触发相应的事件。

onLeave(index,nextIndex,direction)在我们离开一个 section
时,会触发一次此回调函数,接收 index 、 nextIndex 和 direction 3个参数:

index是离开的“页面”的序号,从1开始计算;nextIndex是滚动到的目标“页面”的序号,从1开始计算;direction判断往上滚动还是往下滚动,值是 up 或 down。

通过return false;可以取消滚动

afterRender()页面结构生成后的回调函数,或者说页面初始化完成后的回调函数

afterResize()浏览器窗口尺寸改编后的回调函数

afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)滚动到某一幻灯片后的回调函数,与afterLoad类似。

onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)在我们离开一个slide时,会触发一次此回调函数,与onLeave类似。

发表评论

电子邮件地址不会被公开。 必填项已用*标注