FullPage.js
阅读量:22660
发布时间:2015-10-25 09:33:15
一、简介
fullPage是基于jQuery的一款网页全屏切换、滚动的的插件,可以轻松的实现鼠标滚动、键盘控制和手机触摸控制。
作者来源于西班牙,以下是作者的自我简介
My name is Álvaro Trigo. I'm from Spain and i'm 27 years old. Currently living and working as a web developer in Cambridge, UK.
fullPage是作者放在github的开源项目,超过七十个人作出贡献,在github上JavaScript插件排名前50名,官网地址。
fullPage自动延迟图片加载功能:
<img data-src="image.png">
二、使用方法
1.引入文件
<link rel="stylesheet" href="/css/jquery.fullPage.css"> <!-- jquery文件要在fullPage.js之前引入 --> <script src="/js/jquery-2.1.4.min.js"></script> <!-- 不修改配置文件,可以不引入 easing 定义页面section滚动的动画方式,默认为 easeInQuart 修改的时候需要引入 jquery.easings.min.js 或者 jquery UI --> <script src="/js/jquery.easings.min.js"></script> <!-- 不修改配置文件,可以不引入 scrollOverflow 默认是false 内容超过满屏后是否显示滚动条,true 需要 jquery.slimscroll插件配合 --> <script src="/js/jquery.slimscroll.min.js"></script> <!-- fullPage插件 --> <script src="/js/jquery.fullPage.js"></script>
2.HTML代码
这只一个整体的DIV,ID为fullpage,代表里面的内容都属于fullpage.js管理,每一个section都是一页(竖向显示),每一页里面可以有多个slide(幻灯片)
<div id="fullpage"> <div class="section"><h1>section 1</h1></div> <div class="section"> <div class="slide">slide 1</div> <div class="slide">slide 2</div> <div class="slide">slide 3</div> </div> <div class="section"><h1>section 3</h1></div> <div class="section"><h1>section 4</h1></div> </div>
3.js初始化
$(document).ready(function(){ $('#fullpage').fullpage(); })
三、配置
1.选项
选项 | 类型 | 默认值 | 说明 |
---|---|---|---|
sectionsColor | 数组 | 无 | 为每一个 section 设置 background-color属性 |
controlArrows | 布尔值 | true | 内容是否居中显示 |
resize | 布尔值 | false | 字体是否随着窗口缩放而缩放 |
scrollingSpeed | 整数 | 700 | 滚动速度,单位为毫秒 |
anchors | 数组 | 无 | 定义锚链接 默认值为[] 用户可以快速的打开定位到某一个页面 定义不需要加# 锚链接不能和已有的id、name值相同 |
locaAnchors | 布尔值 | false | 是否锁定锚链接 |
active | 布尔值 | 默认打开页,在页面 class 添加active样式 | |
easing | 字符串 | easeInQuart | 定义页面section滚动的动画方式 |
css3 | 布尔值 | false | 是否启动CSS3动画 |
loopBottom | 布尔值 | false | 滚动到底部时候是否连续滚动到底部 |
loopTop | 布尔值 | false | 滚动到最顶部后是否滚底部 |
loopHorizontal | 布尔值 | true | 左右滑块是否循环滑动 |
autoScrolling | 布尔值 | true | 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条 |
paddingTop | 字符串 | 0 | 与顶部的距离 固定导航的时候需要这个配置项 |
paddingBottom | 字符串 | 0 | 与底部距离 |
fixedElements | 字符串 | null | 需要配置jquery选择器 固定元素 使用 z-index: 999;也可以做到 |
keyboardScrolling | 布尔值 | true | 是否使用键盘方向键导航 |
touchSensitivity | 整数 | 5 | 在移动设备中滑动页面的敏感度 最大值100 越大则越难滑动 |
continuousVertical | 布尔值 | true | 是否循环滚动,与 loopTop 及 loopBottom 不兼容 |
animateAnchor | 布尔值 | true | 锚链接是否可以控制滚动动画,锚链接的跳转是否有动画效果 |
recordHistory | 布尔值 | false | 是否记录历史,当autoScrolling:false 选择将被关闭 |
menu | 字符串 | 绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动 | |
navigation | 布尔值 | true | 是否显示导航,true会显示小圆点作为导航 |
navigationPosition | 字符串 | left | 导航小圆点的位置 可以设置为 left 或者 right |
navigationTooltips | 字符串 | 提示信息,相等于a标签的title属性,可以在fullpage.css中修改样式 | |
showActiveTooltip | 布尔值 | false | 是否自动单前页面的导航 tooltip信息 |
slidesNavigation | 布尔值 | false | 是否显示横向幻灯片的导航 |
slidesNavPosition | 字符串 | bottom | 横向幻灯片的导航位置top或者bottom |
scrollOverflow | 布尔值 | false | 内容超过满屏后是否显示滚动条,true 需要 jquery.slimscroll插件配合 |
sectionSelector | 字符串 | .section | section的选择器 |
slideSelector | 字符串 | .slide | slide的选择器 |
2.方法
可以直接在控制台使用:$.fn.fullpage.**(){}调用函数。
名称 | 说明 |
---|---|
moveSectionUp() | 向上滚动一页 |
moveSectionDown() | 向下滚动一页 |
moveTo(section, slide) | 动到第几页的第几张幻灯片 section从1开始计数 slide从0开始计数 |
silentMoveTo(section, slide) | 和以上类似,没有动画效果 |
moveSlideRight() | slide 向右滚动 |
moveSlideLeft() | slide 向左滚动 |
setAutoScrolling() | 设置页面滚动方式,设置为 true 时自动滚动 |
setAllowScrolling() | 添加或删除鼠标滚轮/触控板控制 |
setKeyboardScrolling() | 添加或删除键盘方向键控制 |
setScrollingSpeed() | 定义以毫秒为单位的滚动速度 |
3.回调函数
名称 | 说明 |
---|---|
afterLoad() | 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算 |
onLeave() |
滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算; |
afterRender() | 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数 |
afterSlideLoad() | 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数 |
onSlideLeave() | 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数 |
verticalCentered() |
某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数 |
这可看本站的 fullPage 示例