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, //使用键盘方向导航键 ,默认为truetouchSensitivity:,//移动设备中滑动液面敏感性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>