01.fullpage简介，基本使用，常用属性

发表于 | 分类于

fullpage简介

参考fullPage插件

github fullPage.js

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

兼容性：fullPage.js兼容所有的现代浏览器，以及一些旧版浏览器，如Internet Explorer 9，Opera 12等都能兼容。 可兼容支持CSS3的浏览器与非支持CSS3的浏览器，适用于旧版浏览器。 同时，手机、平板电脑和触摸屏电脑还提供触屏支持。

V6yU91.md.jpg

基本使用

按照github的指示，引入相关的文件，注意点，fullpage是基于jquery的，所以首先要引入jquery，否则，无法用js操作fullpage，jquery要位于fullpage.js之前

接着搭建基本的结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
<div id="fullpage">
    <div class="section">Some 1section</div>
    <div class="section">Some 2section</div>
    <div class="section">Some 3section</div>
    <div class="section">Some 4section</div>
</div>


<script>
    new fullpage('#fullpage', {
        //options here
        autoScrolling:true,
        scrollHorizontally: true
    });

    //methods
    // fullpage_api.setAllowScrolling(false);
</script>
</body>

不注释这一句，鼠标滚动没有效果，fullpage_api.setAllowScrolling(false);但是可以用键盘的上下箭头控制页面滚动

new fullpage('#fullpage'id选择器绑定<div id="fullpage">，告诉js,这些html需要滚动的

常用属性

  1. 注意，pink要加引号，否则没有作用
1
sectionsColor : ['#ccc', '#fff',"pink","skyblue"],
  1. （默认false）如果设置为true，则会显示一个由小圆圈组成的导航栏。
1
navigation: true,

  1. navigationTooltips: （默认为[]）定义要使用导航圈的工具提示。 例如：navigationTooltips：['firstSlide'，'secondSlide']。 如果您愿意，也可以在每个部分中使用属性data-tooltip来定义它们。

  2. navigationPosition:”left”,left要用引号

  3. loopBottom: （默认为false）定义滚动到最后一节是否应该滚动到第一个。但是这样子会看到从最后到第一屏的过程，就是说看到了2，3屏，

    看第七点

  4. loopTop:（默认为false）定义在第一节中向上滚动是否滚动到最后一个。

  5. continuousVertical:true, 将上面两点注释掉，用这个就可以实现无线滚动

第七点有个bug，如下图：

V6ydc6.jpg