初始化参数

优质

小牛编辑

127浏览

2023-12-01

上一节中我们给大家介绍了Fullpage的基本用法，可能很多用户有个性化的需求，没关系Fullpage提供了多个参数，我们可以配置这些参数，满足我们项目的需求。

controlArrows

默认值：true，决定是否使用控制箭头向左或向右移动幻灯片。

verticalCentered

默认值：true，决定是否初始化后，是否垂直居中网页的内容，如果你想自定义元素的位置，那么你可以设置为false，在插件初始化后调用afterrender回调函数加载其它的脚本库设置你网页的内容。

resize

默认值：true，是否在窗口改变大小后，自动调整网页中字体的大小。

scrollingSpeed

默认值：700，每个屏幕滚动动画执行的时间，时间的单位为毫秒（ms）。

sectionsColor

默认值：none，定义每个section的CSS背景演示，例如下面的代码：

$('#fullpage').fullpage({
  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

如果设置的参数不对称，比如屏幕个数多余设置的颜色个数，那么多余的屏幕默认没有背景颜色，如果屏幕个数少于设置的颜色个数，那么多余的颜色将不显示。

anchors

默认值：[]，定义导航的锚文本信息例如（#example），每个导航文本之前用英文逗号（,）分隔，快速导航的锚文本URL也是使用的这个文本，浏览器通过此锚文本链接可以支持前进和后退按钮功能。

此选项的设置还可以作为用户的书签，当用户打开带有锚文本的URL时，Fullpage可以自动跳转到对应的section屏幕或者slide幻灯片位置。

注意，如果你使用了此选项，那么网页中不能有相同的ID，一来Fullpage插件无法准确的定位到section屏幕或者slide幻灯片位置，二来这也有悖网页中CSS的编写规范。

lockAnchors

默认值：false，确定是否在URL中的锚点将在插件有任何影响。你仍然可以使用锚内部自己的函数和回调，但他们不会有任何作用，在网站的滚动。如果你想把fullpage.js在URL使用锚其他插件。

注意，这样的设置有助于了解anchors选项在侧边栏菜单的对应关系，与类的元素的值。通过.section它在标记的位置。

easing

默认值：easeInOutCubic，定义了用于垂直和水平滚动的过渡效果，它要求文件vendors/jquery.easings.min.js或者jQuery UI插件，具体的动画效果你可以参考 easings插件介绍，你也可以使用其它的动画插件库。

easingcss3

默认值：ease，定义在滚动屏幕中使用css3:true设置的过度效果，你可以使用 CSS3 transition-timing-function 属性自定义多个动画效果，例如：linear、ease-out、……，或者使用cubic-bezier方法创建自定义的动画效果，你可能想要使用 Matthew Lein CSS Easing Animation Tool 创建这个。

loopTop

默认值：false，定义屏幕滚动到第一个后，是否循序滚动到最后一个。

loopBottom

默认值：false，定义屏幕滚动到最后一个后，是否循环滚动到第一个。

loopHorizontal

默认值：true，定义水平的幻灯片是否循环切换。

css3

默认值：true，确定是否使用JavaScript和CSS3转换滚动在切片和幻灯片。加快平板电脑和移动设备的浏览器支持CSS3的运动有益。如果此选项设置为true，浏览器不支持CSS3，jQuery回调函数将被替代。

autoScrolling

默认值：true，定义屏幕是否自动滚动，还是需要用户触发事件滚动，它也影响了部分适合在平板电脑和手机浏览器/设备窗口。

fitToSection

默认值：true，设置是否自适应整个窗口的空间，以某个section的内容为分界线，设置为true时，某个的section将填充到整个页面，否者用户可以停留在网页的任何位置。

scrollBar

默认值：false，定义是否使用浏览器默认的滚动条，如果使用浏览器默认的滚动条，autoScrolling配置任然生效，用户也可以自由滚动的网站与滚动条和fullpage.js将适合的部分在屏幕滚动时完成。

paddingTop

默认值：0，定义每个section固定的头部留白，例如设置paddingBottom: ’10px’、 paddingBottom: ’10em’、……，在使用固定表头的情况下有用的。

fixedElements

默认值：null，定义的某个元素是否在网页的固定位置，元素将被关闭的插件是必要的时候，使用CSS3的选项保持滚动结构固定。它需要对这些元素的jQuery选择器字符串。例如：fixedElements: ‘#element1, .element2’。

normalScrollElements

默认值：null，如果你想避免自动滚动，滚动时的一些元素，这是你需要使用的选项。（有用的地图，滚动div等）需要对这些元素的jQuery选择器字符串。例如：normalScrollElements: ‘#element1, .element2’。

normalScrollElementTouchThreshold

默认值：5，定义了一个数字，测试HTML标签树的机构，是否在在移动设备上支持触摸事件。

keyboardScrolling

默认值：true，定义是否可以通过键盘箭头事件控制section的滚动。

touchSensitivity

默认值：5，定义了浏览器窗口的宽度/高度的百分比，多远的触摸滑动可以跳转到下一个section / slide。

continuousVertical

默认值：false，定义向下滚动到最后一节是否应该向下滚动到第一个，如果向上滚动的第一部分应该滚动到最后一个。不兼容loopTop和loopBottom选项。

animateAnchor

默认值：true，定义当网页的URL中有锚文本的时候，是否帮用户定位到对应的section或者slide。

recordHistory

默认值：true，定义是否将网页滚动的的状态纪录到浏览器的历史记录中。

当设置为true时，每一个section/slide滚动的状态将纪录到浏览器的历史纪录中，这样的设置有利于用户方便回退到刚才浏览的内容。
当设置为false时候，用户的浏览路径不会记录到浏览器的历史纪录中，如果要取消这个选项可以使用autoScrolling:false。

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

注意：注意这个自定义的菜单代码应该放置到插件设置的内容外面，避免因为排版不兼容问题可以使用css3:true，否则将被附加到body的插件本身。

navigation

默认值：false，如果设置为true，那他将会显示一个小圆圈组成的快速导航栏。

navigationPosition

默认值：none，结合参数navigation一起使用，用于设置navigation定义的菜单显示的位置，可以设置为left/right。

navigationTooltips

默认值：[]，定义当navigation设置为true的时候，鼠标移动到快速导航上面的提示文本，每个属性中间用英文半角逗号（,）隔开。

showActiveTooltip

默认值：false，设置是否自动显示navigationTooltips中设置的工具提示文本。

slidesNavigation

默认值：false，使用方法同navigation，不过这个参数设置的导航显示位置不同，而且这个是用户设置幻灯片的。

slidesNavPosition

默认值：bottom，定义slidesNavigation中设置的导航菜单显示的位置，可选的设置值为top/bottom，你可能要修改CSS样式确定的距离从顶部或底部以及任何其他风格如颜色。

scrollOverflow

默认值：false，设置当内容超过屏幕的高度的时候，是否裁切多余的内容。

当设置为true时，你的内容将会被自动裁切，可以考虑当afterRender回调函数调用的时候，处理你的内容的多少或者使用其它的插件库合理的处理多余的内容。
当设置为false时，插件不会自动裁切多余的内容，但是剩下没有显示的内容任然不能显示，此时，你可以使用 jquery.slimscroll.min插件来自定义滚动事件，如果要使用这个插件，应该在Fullpage插件之前引入，例如下面的代码：

<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

sectionSelector

默认值：.section，定义用于选择全屏滚动内容的jQuery选择器。它可能需要改变，有时为了避免与其他插件使用相同的选择器作为整版的问题。

slideSelector

默认值：.slide，定义用于插件幻灯片jQuery选择器。它可能需要改变，有时为了避免与其他插件使用相同的选择器fullpage.js问题。

responsiveWidth

默认值：0， A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s width is less than 900 the plugin will scroll like a normal site.

responsiveHeight

默认值：0， A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s height is less than 900 the plugin will scroll like a normal site.