FullPage.js自学笔记(二)

配置项介绍

一、sectionsColor:

可以为每个section设置background-color属性。示例如下:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 <title>Fullpage简单例子</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css"/>

 <style type="text/css">
    body{
        color:#fff;/*文字为白色*/
    }
    .slide{
      text-align: center;
      font-size: 20px;
    }
 </style>
</head>

<body>
<div id="fullpage">
 <div class="section"><h1>这是第一屏</h1></div>
 <div class="section">
   <div class="slide">slide1</div>
   <div class="slide">slide2</div>
   <div class="slide">slide3</div>
   <div class="slide">slide4</div>
   <div class="slide">slide5</div>
   <div class="slide">slide6</div>
 </div>
 <div class="section"><h1>这是第三屏</h1></div>
 <div class="section"><h1>这是第四屏</h1></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<!--sectionsColor使用-->
<script>
    $(document).ready(function(){
      $('#fullpage').fullpage({
        sectionsColor:['green','orange','gray','red'],
      });
    });
</script>
</body>
</html>

二、controlArrows:

定义是否通过箭头来控制slide幻灯片,默认为true。当我们设置为false,则幻灯片左右两侧的箭头就会消失,在移动设备上,我们可以通过滑动来操作幻灯片。(在PC端无法观看此效果)

三、verticalCentered:

每一页的内容是否垂直居中,默认为true。一般我们保持默认值。

四、resize:

字体是否随着窗口缩放而缩放,默认为false。

五、scrollingSpeed:

滚动速度,单位为毫秒,默认为700。

六、anchors:

定义锚链接,默认值为[]。有了锚链接,用户就可以快速打开定位到某一页。
注:定义锚链接的时候,值不要和页面中任意的id或name相同,尤其是在IE浏览器下。而且定义时不需要加#。

七、lockAnchors:

是否锁定锚链接,默认为false。如果设置为true,那么定义的锚链接,也就是anchors属性则没有效果。这个配置项使用的比较少。

八、easing:

定义页面section滚动的动画方式,默认为easeInOutCubic,如果修改此项,需要引入jquery.easing插件,或者jqueryUi。
注:动画之间的差异比较小,因此可不用设置。

九、css3:

是否使用css3 transforms来实现滚动效果,默认为true。这个配置项可以提高支持css3的浏览器,比如移动设备等的速度,如果浏览器不支持css3,则会使用jquery来代替css3实现滚动效果。

十、滚动方式

loopTop:滚动到最顶部后是否连续滚动到底部,默认为false。
loopBottom:滚动到最底部后是否连续滚动到顶部,默认为false。
loopHorizontal:横向幻灯片是否循环滚动,默认为true。

十一、autoScrolling:

是否使用插件的滚动方式,默认为true,如果选择false,则会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认行为来滚动。

十二、scrollBar:

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

十三、paddingTop/paddingBottom

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

十四、fixedElements:

固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素不动。

十五、keyboardScrolling:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,976评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,249评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,449评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,433评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,460评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,132评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,721评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,641评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,180评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,267评论 3 339
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,408评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,076评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,767评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,255评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,386评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,764评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,413评论 2 358

推荐阅读更多精彩内容

  • 学习 jQuery-fullPage.js 插件已经两天,参照网上的案例仿造了一个“魅族Note2官网”网页,中间...
    seporga阅读 6,476评论 2 11
  • 在页面引入,需要先引入jQuery 进入cdnjs官网,搜索fullpagejquery.fullPage.css...
    质真如渝阅读 4,704评论 1 6
  • fullpage配置项 调用fullpage.js$('#fullpage').fullpage() sectio...
    LeoCong阅读 3,398评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,685评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,756评论 1 92