Fullpage 10.15

Fullpage

Fullpage.js是一个基于jQuery的插件,方便制作全屏网站,主要功能有:

  • 支持鼠标滚动
  • 多个回调函数
  • 支持手机平板的触摸事件
  • 支持CSS3的动画
  • 支持窗口缩放
  • 窗口缩放自动调整
  • 可设置滚动宽度、背景颜色、滚动速度 、循环选项、回调 、文本对齐方式

如何使用



基本的页面结构

一些内容
Slide1
Slide1
Slide1
Slide1
一些内容
一些内容
一些内容

激活fullpage效果


配置项(api)

sectionsColor

可以为每个section设置background-color属性。

controlArrows

定义是否通过箭头来控制slide幻灯片,默认true,如果设置为false,则箭头消失,移动设备可以滑动操作。

scrollingSpeed

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

anchors

锚链接默认为[],可以快速打开定位到某个页面。

注意不要和页面中任意的id或name相同

anchors:['page1','page2','page3','page4']

可以初始页面设定

loopTop

滚动到最顶部是否返回底部,默认为false

loopBottom

滚动到底部后是否返回顶部,默认为false

loopHorizontal

横向slide幻灯片是否循环滚动,默认为true

autoScrolling

是否使用fullpage的滚动方式,默认是true,如果false,则不按页滚动且出现滚动条。

scrollBar

是否含滚动条,默认为false,如果true,则出现滚动条,两种滚动方式都生效。

paddingTop和paddingBottom

设置每一个section顶部或者底部的padding,默认值为0,当我们需要设置一个固定在顶部或底部的菜单,可以设置。

fixedElements

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

fixedElements:'#header'

continuousVertical

循环滚动,默认为false,与loopTop和loopBottom区别是不跳动回去,顺滑滚动。

你可能感兴趣的:(Fullpage 10.15)