文档章节

FullPage.js 帮助API

heartless01
 heartless01
发布于 2017/08/31 11:11
字数 666
阅读 101
收藏 0

FullPage.js下载

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>

2、HTML

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
</div>


每个 section 代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 section 加上 class=”active”,如:

<div class="section active">第三屏</div>

同时,可以在 section 内加入 slide,如:

<div id="dowebok">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

 

3、JavaScript

$(function(){
    $('#fullpage').fullpage();
});

 

 

配置

1、选项

sectionsColor 数组 none

定义每个section的CSS背景演示

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

verticalCentered 字符串 true 内容是否垂直居中
resize 布尔值 false 字体是否随着窗口缩放而缩放
slidesColor 函数 设置背景颜色
anchors 数组 定义锚链接
scrollingSpeed 整数 700 滚动速度,单位为毫秒
easing 字符串 easeInQuart

滚动动画方式

若修改此项需引入jquery.easing插件或引用jquery UI
menu 布尔值 false 绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动
navigation 布尔值 false 是否显示项目导航
navigationPosition 字符串 right 项目导航的位置,可选 left 或 right
navigationColor 字符串 #000 项目导航的颜色
navigationTooltips 数组 项目导航的 tip
slidesNavigation 布尔值 false 是否显示左右滑块的项目导航
slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置,可选 top 或 bottom
controlArrows 布尔值 true 决定是否使用控制箭头向左或向右移动幻灯片。
controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色
loopBottom 布尔值 false 滚动到最底部后是否滚回顶部
loopTop 布尔值 false 滚动到最顶部后是否滚底部
loopHorizontal 布尔值 true 左右滑块是否循环滑动
autoScrolling 布尔值 true 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条
scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条
css3 布尔值 false 是否使用 CSS3 transforms 滚动
paddingTop 字符串 0 与顶部的距离
paddingBottom 字符串 0 与底部距离
fixedElements 字符串  
normalScrollElements    
keyboardScrolling 布尔值 true 是否使用键盘方向键导航
touchSensitivity 整数 5  
continuousVertical 布尔值 false 是否循环滚动,与 loopTop 及 loopBottom 不兼容
animateAnchor 布尔值 true  
normalScrollElementTouchThreshold 整数 5  

 

© 著作权归作者所有

共有 人打赏支持
heartless01
粉丝 0
博文 56
码字总数 14843
作品 0
浦东
前端工程师
私信 提问
fullpage下的navigationColor设置后没有反应。

文件来源github https://github.com/alvarotrigo/fullPage.js html引入 代码如下: $(function(){ $('#fullpage').fullpage({ 'verticalCentered': false, 'css3': true, 'sectionsColor': ......

别慌
2015/04/27
1K
1
VUE 引入 fullpage 失败

1.0 全局引入 jq 2.0 组建因引入 fullpage.js fullpage.css 3.0 $('#fullpage').fullpage() 报错 is not a function 为何...

Z_momo
2017/07/27
90
0
TinyMCE 3.2.6 发布

该版本增加了一个单词计数插件,用来显示在编辑器中输入的单词数。另外开发了一个新的API文档系统来替换以前使用的WIKI,更便于文档的浏览和导航。还包括很多bug和问题的修正,另外一个最大的...

红薯
2009/08/20
296
0
切版内部使用 css 框架 v1.4 发布

切版v1.4版是在切版v1.2版基础上升级的一个版本! 添加了切图工具,公共样式,表单美化,动画交互,响应式,丰富了栏目内容,新增js功能插件。 切版v1.4版本演示地址 http://www2.qieban.cn/...

切版
2017/07/26
1K
11
OSChina 技术周刊第十八期 —— 2015 年 OSC 源创会行程计划

每周技术抢先看,总有你想要的! 移动开发 【软件】开源 Android ORM 框架 OpenDroid 【博客】自己动手做推送 前端开发 【软件】jQuery 全屏滚动插件 fullPage.js 服务端开发/管理 【软件】W...

OSC编辑部
2015/01/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
6
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
3
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
2
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
0
0
RabbitMQ学习(2)

1. 生产者客户端 void basicPublish(String exchange, String routingKey, boolean mandatory, boolean immediate, BasicProperties props, byte[] body) 1. 在生产者客户端发送消息时,首先......

江左煤郎
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部