Fullpage
Fullpage.js是一个基于jQuery的插件,方便制作全屏网站,主要功能有:
- 支持鼠标滚动
- 多个回调函数
- 支持手机平板的触摸事件
- 支持CSS3的动画
- 支持窗口缩放
- 窗口缩放自动调整
- 可设置滚动宽度、背景颜色、滚动速度 、循环选项、回调 、文本对齐方式
如何使用
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js“></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js”></script>
基本的页面结构
<div id="fullpage">
<div class="section">一些内容
<div class="slide">Slide1</div>
<div class="slide">Slide1</div>
<div class="slide">Slide1</div>
<div class="slide">Slide1</div>
</div>
<div class="section">一些内容</div>
<div class="section">一些内容</div>
<div class="section">一些内容</div>
激活fullpage效果
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
此处加入配置项
});
});
</script>
配置项(api)
sectionsColor
可以为每个section设置background-color属性。
controlArrows
定义是否通过箭头来控制slide幻灯片,默认true,如果设置为false,则箭头消失,移动设备可以滑动操作。
scrollingSpeed
滚动速度,默认为700毫秒。
anchors
锚链接默认为[],可以快速打开定位到某个页面。
注意不要和页面中任意的id或name相同
anchors:['page1','page2','page3','page4']
<div class="section active"></div>
可以初始页面设定
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区别是不跳动回去,顺滑滚动。