fullPage常用属性

紧接着上一篇 fullPage基本使用 本章节介绍的内容为 fullPage 的常用的一些属性，属性非常多，你可以自行参考官方文档，我这里就只介绍一些常用的，官方文档地址：https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs

常用属性

属性名称 作用
sectionsColor （默认 none ）为每个 section 定义 CSS background-color 属性，设置每一屏的背景颜色
navigation （默认 false ）如果设置为 true ，则会显示一个由小圆圈组成的导航栏，显示指示器
navigationTooltips （默认为[]）定义要使用导航圈的提示。 例如：navigationTooltips：['firstSlide'，'secondSlide']。 如果您愿意，也可以在每个部分中使用属性 data-tooltip 来定义它们，设置指示器的提示信息
showActiveTooltip （默认为 false）在显示垂直导航中主动显提示，让指示器的提示信息默认就显示
navigationPosition （默认 none ）可以设置为 left 或 right ，并定义导航栏显示的位置（如果使用的话）设置指示器显示的位置 (可以是左边，也可以是右边)
loopBottom （默认为 false）定义首尾链接滚动方式(尾向下) 滚动到最后一屏或者第一屏是否要接着滚动
loopTop （默认为 false）定义首尾链接滚动方式(首向上) 滚动到第一屏或者最后一屏是否要接着滚动
continuousVertical （默认为 false）定义首位链接循环(最后一个 section 向下滚动，滚动到第一个section，或第一个 section 向上滚动时滚动到最后一个 section )。 不兼容 loopTop ，loopBottom 或站点中存在的任何滚动条（scrollBar：true 或 autoScrolling：false ）

代码示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fullpage常用属性</title>
    <link rel="stylesheet" href="css/fullpage.css">
    <!--注意点: 由于fullPage.js 是一个基于 jQuery 的插件, 所以需要先引入jQuery.js-->
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/easings.js"></script>
    <script src="js/scrolloverflow.js"></script>
    <script src="js/fullpage.js"></script>
</head>
<body>
<div id="fullpage">
    <div class="section">Some section11111111</div>
    <div class="section">Some section22222222</div>
    <div class="section">Some section33333333</div>
    <div class="section">Some section44444444</div>
</div>
<script>
    new fullpage('#fullpage', {
        // options here
        // 设置每一屏的背景颜色
        sectionsColor: ['#f00', '#0f0', '#00f', '#000'],
        
        // 显示指示器
        navigation: true,
        
        // 设置指示器的提示信息
        navigationTooltips: ['111111111111111', '222222222222', '3333333333333333', '4444444444444'],
        
        // 让指示器的提示信息默认就显示
        showActiveTooltip: true,
        
        // 设置指示器显示的位置(可以是左边, 也可以是右边)
        // navigationPosition: 'left',
        
        // 滚动到最后一屏或者第一屏是否要接着滚动
        // loopBottom: true,
        
        // loopTop: true,
        
        continuousVertical: true,
    });
</script>
</body>
</html>

浏览器中的效果如下

test

posted @ 2021-08-11 21:43  BNTang  阅读(185)  评论(0)    收藏  举报