fullpage.js(cndjs)
fullpage API（配置项）
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor['#FFF','#F00','#FHH','#FF0'],
controlArrows:false
});
});
</script>
controlArrows:false;(取消箭头设置为滑动 适用于手机页面 qq chrome可能不合适)
vertrialCenter
设置每个页面的内容是否居中
默认为true
resize
设置字体是否随着窗口的缩放而缩放
默认为false
scrollingSpeed
设置页面的滚动速度 默认为700ms
scrollingSpeed:1000
anchors
设置锚链接，默认值为[],有了锚链接可以定位到页面的位置
定义锚链接的时候，值不要和页面任意的Id和name相同
anchors:['page1','page2','page3','page4'] page1 page2就是锚链接
在<div id="section" active> 设置跳到这个锚链接
lockanchors
是否锁定锚链接 默认为false
设置为true时 当页面滑动时浏览器上地址 锚链接不变
easing
设置页面section滑动方式 默认为easeInOutCubic
如果修改需要引入jquery.easings或者 jquery ui插件（差异较小）
css3
是否使用css3 transforms来实现滚动效果，默认为true
提高支持css浏览器的效果
如果不支持使用jquery实现滚动效果
loopTop
设置滚动到顶部时是否回滚到底部 默认为false
loopBottom
设置滚动到底部时是否回滚到顶部 默认为false
ioopHorizontal
设置横向幻灯片是否循环滚动 默认为true
autoScrolling
设置是否使用插件的滚动方式默认为ture 否则使用浏览器的滚动条的方式
scrollBar
设置滚动条 默认为false 否则出现浏览器滚动条 但还是页面滚动但滚动条的方式也起作用
paddingTop paddingBottom
设置每一个section顶部和底部的padding
一般我们设置顶部或底部固定的菜单、导航、元素等，可以使用
fixedElements
默认为null 表示页面滚动时 fixedElement设置的元素固定不变的（值是一个jquery的选择器）
#header{
top:0;
position:fixed;
right:200px;
font-size:30px;
}
fixedElements: '#header'
keyboardScrolling
是否使用键盘方向键导航 默认为true
touchSensitivity
在移动页面中滑动页面的敏感性 默认为5
用百分比衡量 默认100 越大越难滑动
continuousVertial
设置页面是否顺滑循环滚动 不像loopTop有个跳动过程
animateAnchor
锚链接是否可以控制滚动动画 默认true 否则锚链接定位到某个页面不会有动画效果
recordHistory
是否记录历史 默认为true 可以记录浏览器滚动的历史 通过前进后退来导航
如果设置autoScrolling 这个配置将会关闭设置为flase
menu
绑定菜单 菜单可以控制滚动 设置的属性与anchors值对应
默认为flase 可以设置为jquery的选择器
#fullpagemenu{
position:fixed;
top:0;
z-index:999;
}
#fullpagemenu li{
float:left;
left:auto;
}
<ul id="fullpagemenu">
<li data-menuanchor="page1" class="active"><a href="#page1">section 1 </a> </li>
<li data-menuanchor="page2"><a href="#page2">section 2 </a> </li>
<li data-menuanchor="page3"><a href="#page3">section 3 </a> </li>
<li data-menuanchor="page4"><a href="#page4">section 4 </a> </li>
</ul>
menu:'#fullpage'
navigation
是否显示导航条默认为false
设置为true时 会显示小圆点作为导航
navigationPositin
导航小圆点的位置 left 或者right
navigationTooltips
导航小圆点tooltips设置默认为[] 注意按顺序设置
showActiveTooltip
是否显示当前页面导航的tooltip信息 默认为flase
滑动页面右边直接显示 不用鼠标浮动上去
slidesNavigation
是否显示横向幻灯片的导航 默认为flase
slidesNavPosition
横向幻灯片导航的位置 默认为bottom 可以设置为top
scrollOverflow
当内容比较多需要滚动条显示时使用 默认为false
如果要查看滚动内容 还需要引入jquery.slimscroll插件
scrollOverflow:true;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.7/jquery.slimscroll.js">
</script>
sectionSelector
section的选择器 默认为.section
例如 修改
<div id="fullpage">
<div class="section ">为
<div id="fullpage">
<div class="page ">
设置
sectionSelector: '.page'
slideSelector
slide的选择器 默认为.slide
具体参考fullpage官方文档 https://github.com/alvarotrigo/fullPage.js#options
