Fullpage 插件配置项

来源：互联网发布：网络骗多少钱可立案编辑：程序博客网时间：2024/05/21 15:02

插件描述：fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，主要是动画，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（查看网址 http://www.jq22.com/demo/fullpage-141201214949/index8.html#page2）。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。

主要功能有：

支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
我利用fullpage.js模仿百度舆情完成的全屏轮播网站网址https://xuanrandeyimojingjin.github.io/baiduyuqing/，初学时的作品，谨供大家看一下效果，有兴趣的可以自己动手设计自己的全屏网站！

jQuery插件

插件调用

<ul id="lunbo">  <li>...</li>  <li>...</li>  <li>...</li>  <li>...</li></ul><script src="jquery.js"></script><script src="jqeury.lunbo.js"></script><script>$('#lunbo').lunbo({  //一些配置项  time:40;  step:function(){}});</script>

jQuery插件文件

(function($){  var lunbo = function () {    console.log(1);  }  $.fn.extend({    lunbo:lunbo;  })})(jQuery)

cdn (content deliver network) 内容分发网络

如果百度使用了某个 cdn中的jquery.js,而且用户打开过百度, 我们自己同样使用了 同一个 cdn中的jquery.js, 用户打开我们的网页时使用浏览器缓存中的jquery.js.

例子

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <link rel="stylesheet" href="./css/index.css">    <script src="https://cdn.boot.com/jquery.js"></script>    <script src="./js/index.js"></script>  </head>  <body>  </body></html>

fullpage 插件基本使用

<link rel="stylesheet" href="jquery.fullPage.css" media="screen" title="no title" charset="utf-8"><script src="jquery.js"></script><script src="jquery.fullPage.js"></script><script>$(function(){  $('#fullpage').fullpage({    //这里是配置项  });})</script><div id="fullpage">  <div class="section" id="section-1">      <div class="slide"> </div>      <div class="slide"> </div>  </div>  <div class="section" id="section-2"></div>  <div class="section" id="section-3"></div></div>

每滚动一屏，会给当前section加上　active class

所以我们可以写出类似下面这样的 scss 文件来操控动画

#section1{  h1{    /**/  }  h2{    transition: /**/  }}#section1.active{  h1{    animation:/**/  }  h2{    /**/  }}

插件配置项

sectionsColor

一个数组规定了各个section的颜色

verticalCentered

每一页的内容是否垂直居中，默认值为true

resize

字体大小是否随窗口缩放而缩放默认值为false

scrollingSpeed

滚动速度,默认为700毫秒

anchors

给每个section定义锚链接

lockAnchors

是否锁定锚链接

active class

默认显示哪个section

easing

定义页面section滚动的动画方式设置这个值需要引入jquery.easings 插件

css3

默认为true,使用css3 transform 来实现页面滚动动画

loopTop

滚动到最顶部后是否连续滚动到底部，默认值为false

loopBottom

滚动到最底部后是否连续滚动回顶部默认值为false

loopHorizontal

横向slide幻灯片是否循环滚动，默认值为true

autoScrolling

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

scrollBar

是否包含滚动条，默认值为false 如果设置为true,则浏览器自带的滚动条出现页面滚动时还是页滚动，但是滚动条的默认行为也效果

paddingTop paddingBottom

设置每一个section顶部和底部的padding，默认值为0 如果我们需要设置一个固定在顶部或者底部的菜单，导航，元素等，可以使用这两个配置项

fixedElements

普通方式书写的固定定位元素会被插件覆盖需要我们通过指定这个属性才会生效，参数为一个jquery选择器

keyboardScrolling

是否可以使用键盘方向键导航，默认值为true

touchSensitivity

在移动设备中滑动页面的敏感性，默认为5，按百分比衡量，越大则越难滑动

continuousVertical

是否循环滚动，默认值为false，如果设置为true,则页面会循环滚动，不像loopTop loopBottom那样出现跳动这个属性和loopTop loopBottom 不兼容不要同时设置

animateAnchor

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

recordHistory

是否记录历史,默认为true,可以记录页面滚动的地址通过浏览器前进和后退按钮来导航

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

<ul id="fullpageMenu">  <li data-menuanchor="page1"><a href="#page1">1</a</li>  .....</ul>

navigation

是否显示导航，默认false 如果设置为true 会显示小圆点，作为导航

navigationPosition

导航小圆点位置，可以设置为left或者right

navigationTooltips

导航小圆点的tooltips设置，默认为[],按照顺序放置

showActiveTooltip

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

slidesNavigation

是否显示横向幻灯片的导航，默认值为false

slidesNavPosition

横向幻灯片导航的位置，默认为bottom 可以设置为top

controlArrows

定义是否通过箭头来控制slide幻灯片,默认值为true 在移动设备上可以通过滑动来操作幻灯片

scrollOverflow

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

sectionSelector

section的选择器，默认为.section

slideSelector

slide的选择器默认为.slide.

配置项中的回调函数

afterLoad(anchorLink,index)

滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接收 anchorLink 和index 两个参数， anchorLink 是锚链接的名称 index 是序号从1开始计算可以根据 anchorLink 和 index的参数值判断触发相应的事件

onLeave(index,nextIndex,direction)

离开一个section时触发，通过return false可以取消滚动离开的序号到达的序号滚动的方向

afterRender()

页面结构生成之后的回调函数

afterResize()

浏览器窗口尺寸改变之后的回调函数

afterSlideLoad()

滚动到某一个幻灯片后的回调函数

onSlideLeave

离开一个slide之后的回调函数

$.fn.fullpage 对象中的方法介绍

moveSectionUp()
moveSectionDown()

  $('#movedown').on('click',function(){    $.fn.fullpage.moveSectionDown();  })

moveTo(section,slide)

滚动到第几页，第几个幻灯片，注意，页面从1开始，而幻灯片从0开始

silentMoveTo(section,slide)

滚动到第几页，和moveTo一样，但是没有动画效果

moveSlideRight()

幻灯片向右滚动

moveSlideLeft()

幻灯片向左滚动

setAutoScrolling()
setLockAnchors()
setRecordHistory()
setScrollingSpeed()
setAllowScrolling(boolean,[directions])

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

destory(type)

销毁fullpage特效，type可以不写，或者使用all,不写type,fullpage给页面添加的样式和html元素还在如果使用all,则样式 html等全部销毁

reBuild()

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

~END~

我是渲染的一抹寂静

追求自由独立简单努力做一个热爱生活珍惜生命的人

白天是个哼次哼次敲代码的程序猿，晚上是读书，健身，享受生活的自由者。

如果你喜欢我的文字和内容，关注我，一起加油一起进步不定期更文，我等你来哦！

1 0