fullpage的简单操作

fullpage简单说明

fullpage是一款基于jQuery的一款全屏插件,使用方便,操作简单!

首先需要引用jquery-1.12.3.js文件,jquery.fullPage.min.css件,jquery.fullPage.min.js文件,如果要增加页面滚动等效果还要引jquery.slimscroll.min.js文件.在下边代码中并没有将文件下载下来使用,而是用cdn网络请求引入js文件,可以减少服务器的压力.大家可以上cdnjs.com来找到上述的所有文件资源!

设置jquery.fullPage.min.css

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.min.css"/>

设置css样式

<style type="text/css">
.aa{
text-align: center;
}
#header{
font-size: 50px;
position: fixed;
top: 0;
right: 200px;
}
.slide{
font-size: 30px;
text-align: center;
}
#fullpageMenu{
font-size: 30px;
position: fixed;
top: 0;
left: 200px;
z-index: 999;
list-style: none;
}
</style>

设置body代码

设置fullpage代码块

<script type="text/javascript">
$(function(){
//配置项
$('#fullpage').fullpage({
sectionsColor:['green','red','yellow','black'],//设置每页颜色
controlArrows:true,
verticalCentered:true,
resize:true, //屏幕自适应
scrollingSpeed:1000, //翻页速度
anchors['page1','page2','page3','page4'], //给每页添加锚点
lockanchors:false, //禁锢锚点
css3:true, //css3翻页动画
loopTop:true, //自动回滚到顶部
loopBottom:true, //自动回滚到底部
loopHorizontal:false, //页面横向不能回滚
autoScrolling:true,//是否使用插件滚动方式,默认true,false选择浏览器自带滚动条,将不按照页滚动
scrollBar:true,//加入滚动条
paddingTop:0,//设置顶部与底部距离,可以用来设置顶部菜单
paddingBootom:50,
fixedElements:'#header',//设置header固定在顶部,不随页面滚动
keyboardScrolling:true, //使用键盘方向导航键 ,默认为true
touchSensitivity:,//移动设备中滑动液面敏感性
continueVertical:true,//设置页面循环滚动
animateAnchor:false , //在设置锚链接后页面会过度到当前页面,此属性没有过度效果
recordHistory:true,//记录历史
menu:'#fullpageMenu',
showActiveTooltip:true,//自动显示navigationTooltips:['page1','page2','page3','page4']
navigation:true, //设置右侧滚动翻页小圆点
navigationPosition:'right',
navigationTooltips['page1','page2','page3','page4']
slidesNavigation:true, //设置slide页面中随页面滚动小圆点
slidesNavPosition:'top' ,//设置滚动小圆点位置
scrollOverflow:true, //当先页面满屏后显示滚动条,但需要slimscroll插件
})
})
</script>