<link rel="stylesheet" type="text/css" href="/plugins/fullpage/jquery.fullPage.css" />
<link href="http://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/fullpage/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(function() {
$("#fullpage").fullpage({
// 导航区域
// 绑定菜单盒子 ( #menu)
'menu': '#menu',
// 是否锁定锚, 锁定后点击菜单不会跳转到对应的屏 (false)
'lockAnchors':false,
// url锚参数 用户区分当前是哪一屏 (['firstPage','secondPage'])
'anchors':["firstPage", "secPage", "thrPage", "fourPage", "fivePage"],
// 是否开启导航点 (false)
'navigation':true,
// 导航点位置 (right) left,right
'navigationPosition':'left',
// 开启导航点后 鼠标放在小圆点上的提示 (['firstSlide','secondSlide'])
'navigationTooltips':['首页 ',' 数据监测','规划报告','新闻中心','关于我们'],
// 是否直接显示导航点提示 (false)
'showActiveTooltip':false,
// 开启Slide导航点(false)
'slidesNavigation':true,
// Slide导航点位置(bottom)
'slidesNavPosition':'top',
// Scrolling 动画
// 每个屏幕滚动动画执行的时间，时间的单位为毫秒（ms）
'scrollingSpeed':1000,
// 定义屏幕是否自动滚动 (true)
'autoScrolling':true,
// 默认值：true，设置是否自适应整个窗口的空间，以某个section的内容为分界线，
//设置为true时，某个的section将填充到整个页面，否者用户可以停留在网页的任何位置。
'fitToSection':true,
'fitToSectionDelay':1000,
// 是否使用浏览器默认的滚动条, 开启后autoScrolling配置任然生效,关闭后wow.js无效
'scrollBar':false,
// 定义了用于垂直和水平滚动的过渡效果
'easying':'easeInOutElastic',
// 定义是否使用Js或css3,让section和slide使用动画
'css3':true,
// 要定义此效果，css3属性必须为true
// 你可以使用 CSS3 transition-timing-function 属性 自定义多个动画效果，
// 例如：linear、ease-out、
// 或者使用cubic-bezier方法创建自定义的动画效果，
'easingcss3':'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
// 默认值：false，定义屏幕滚动到第一个后，是否循序滚动到最后一个。
'loopTop':false,
// 默认值：false，定义屏幕滚动到最后一个后，是否循环滚动到第一个。
'loopBottom':false,
// 默认值：false，定义向下滚动到最后一节是否应该向下滚动到第一个，
// 如果向上滚动的第一部分应该滚动到最后一个
// loopToop、loopBottom相比 会直接滑动到第一个或最后一个
// 不兼容loopTop和loopBottom选项,
// 任何滚动条存在于网站（scrollBar:true或autoScrolling:false）。
'continuousVertical':false,
// 默认值：true，定义水平的幻灯片是否循环切换。
'loopHorizontal':true,
// 默认null,避免在滚动某些元素时滚动屏幕, 如百度地图放大会向上滑,将地图容器ID设置进来
//'normalScrollElements':['#map'],
// fullpage扩展：定义在最后一个幻灯片中向右滑动应该向右滑动到第一个还是不向左滑动，
// 如果在第一个幻灯片中向左滚动，应该向左滑动到最后一个幻灯片。
// 不兼容loopHorizontal。需要fullpage.js> = 2.8.3。
//'continuousHorizontal':false,
// fullpage扩展：默认false,定义是否使用鼠标滚轮或触控板在滑块内水平滑动。
//'scrollHorizontally':false,
// fullpage扩展：默认false,移动一个水平滑块是否会迫使其他部分中的滑块在相同方向上滑动。
//'interlockedSlides':false,
// fullpage扩展：默认false,启用或禁用使用鼠标或手指拖动和滑动部分和幻灯片,
// 可选项: true, false, fingersonly
//'dragAndMove':false,
// fullpage扩展：默认false,提供使用百分比非全屏部分的方法
//'offsetSections':false,
// fullpage扩展：默认false,是否在离开其滑块后重置每个滑块
//'resetSliders':false,
// fullpage扩展：默认false,定义是否使用淡入淡出效果，而不是默认滚动效果。
// 可选项: true, false, sections,slides
//'fadingEffect':false,
// 是否为节/幻灯片创建滚动，以防其内容大于其高度 插件scrolloverflow.min.js
//'scrollOverflow':false,
// 默认值：true，定义是否可以使用键盘导航内容。
////辅助功能
'keyboardScrolling':true,
// 默认值：true，访问网站网址 是直接跳转到指定屏还是从第一屏滚动到指定屏
'animateAnchor':true,
// 默认值：true，是否将站点的状态推送到浏览器的历史记录
'recordHistory':true,
////设计
// 默认值：true，确定是否使用控制箭头使幻灯片向右或向左移动。
'controlArrows':true,
// 默认值：true，垂直居中sections中的内容。
// 请考虑在afterRender回调中使用委派或加载其他脚本。
'verticalCentered':true,
// 默认值：none，定义每个section的CSS背景演示
'sectionsColor':["#294b77", "#ffffff", "#3e8ebd", "#ffffff", "#ffffff"],
// 默认值：0，定义每个sections的上内边距
'paddingTop':'100px',
// 默认值：0， 定义每个sections的下内边距
'paddingBottom':'100px',
// 默认值：null，定义哪些元素将从插件的滚动结构中移除,这在使用css3选项保持固定时是必需的
'fixedElements':'.removeS',
// 默认值：0，当浏览器的宽度小于定义值时，网页将像正常网页一样滚动，不会一屏一屏的滚动。
'responsiveWidth':0,
// 默认值：0，浏览器高度小于定义值时 ，网页将像正常网页一样滚动，不会一屏一屏的滚动。
'responsiveHeight':300,
// 自定义选择器
// 默认值：.section，定义用于插件section的jQuery选择器
'sectionSelector':'.section',
// 默认值：.slide， 定义用于插件slide的jQuery选择器
'slideSelector':'.slide',
// 默认值：.true， 是否启动延迟加载 ，使用路径为 data-src=''
'lazyLoading':true,
// events 事件
// 用户在离开Section时， 在转到新section时触发此回调, 返回false将取消移动
// index: 离开section的索引, 从1开始
// nextIndex: 目标section的索引, 从1开始
// direction: section的滚动方向, up或down
onLeave: function(index, nextIndex, direction){
console.log("当前事件为：onLeave!");
console.log('离开第'+index+"个页面, 滑动到第"+nextIndex+"个页面,
当前移动方向："+direction);
//return false;
},
// 在滚动结束后，section一旦被加载，回调触发
// anchorLink： 对应section的anchorLink
// index： section的索引, 从1开始
afterLoad:function(anchorLink, index){
console.log("当前事件为：afterLoad!");
console.log('当前section是第'+index+'个页面, 它的anchorLink为： '+anchorLink);
},
// 这个回调是在页面结构生成之后触发，这是要用来初始化其他插件
afterRender: function(){
console.log("当前事件为：afterRender!");
console.log("页面结构已生成！！！");
},
// 在调整浏览器窗口大小后被触发
afterResize: function(){
var pluginContainer = $(this);
console.log("当前事件为：afterResize!");
console.log('部分已经调整大小');
},
// fullpage.js从正常模式更改为响应模式或从响应模式更改为正常模式后触发。
// isResponsive：boolean 确定是进入响应模式(true),还是返回正常模式(false)
afterResponsive: function(isResponsive){
console.log("当前事件为：afterResponsive!");
console.log('isResponsive:'+isResponsive);
},
// 在滚动结束后，加载了section的slide后，回调触发
// anchorLink： 对应section的anchorLink
// index：section的索引, 从1开始
// slideAnchor：对应slide的anchor(锚点)
// slideIndex：slide的索引, 从1开始(默认slide不计数)
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
console.log("当前事件为：afterSlideLoad!");
console.log('当前是第'+index+'个section, 它的anchor是'+anchorLink+'
.当前slide是第'+slideIndex+'个,它的anchor是'+slideAnchor);
},
// 当用户在离开slide前往转到另一个slide时，会触发此回调。返回false将在它发生之前取消移动。
// anchorLink：section对应的anchorLink
// index：section的索引, 从1开始
// slideIndex：slide的索引, 从0开始
// direction：slide的滚动方向, right or left
// nextSlideIndex: 目标slide的索引
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
console.log("当前事件为：onSlideLeave!");
console.log('当前是第'+index+'个section, 它的anchor是'+anchorLink+'
.当前slide是第'+slideIndex+'个,它本次向'+direction+' 移动,
目标是第'+nextSlideIndex+'个');
}
};
// 效果查看地址 http://alvarotrigo.com/fullPage/examples/methods.html#3rdPage
// 向上滚动一个section
$.fn.fullpage.moveSectionUp();
// 向下滚动一个section
$.fn.fullpage.moveSectionDown();
// 将页面滑动到指定section, 并滑动到第2个slide
$.fn.fullpage.moveTo('firstSlide', 2);
$.fn.fullpage.moveTo(3, 0);
$.fn.fullpage.moveTo(3);
// 和moveTo相同, 直接跳转到目标 没有动画
$.fn.fullpage.silentMoveTo('firstSlide', 2);
// 将当前slide向右滚动到下一张slide
$.fn.fullpage.moveSlideRight();
// 将当前slide向左滚动到上一张slide
$.fn.fullpage.moveSlideLeft();
// 设置页面滚动方式, true为自动滚动，false手动正常滚动
$.fn.fullpage.setAutoScrolling(false);
// 设置section是否在屏幕中间
$.fn.fullpage.setFitToSection(false);
// 设置定位url中的锚是否可以控制页面滚动
$.fn.fullpage.setLockAnchors(false);
// 禁止滚动
$.fn.fullpage.setAllowScrolling(false);
// 禁止向下滚动 all,up,down,left,right
$.fn.fullpage.setAllowScrolling(false, 'down');
// 禁用向下和向右
$.fn.fullpage.setAllowScrolling(false, 'down, right');
// 禁用所有键盘滚动
$.fn.fullpage.setKeyboardScrolling(false);
// 禁用键盘向下滚动 all,up,down,left,right
$.fn.fullpage.setKeyboardScrolling(false, 'down');
// 禁用键盘向下和向右
$.fn.fullpage.setKeyboardScrolling(false, 'down, right');
// 是否为URL中的每个哈希更改历史记录
$.fn.fullpage.setRecordHistory(false);
// 定义滚动速度（以毫秒为单位）
$.fn.fullpage.setScrollingSpeed(700);
// 销毁由fullPage.js创建的所有JavaScript事件（滚动，URL中的hashchange ...）
$.fn.fullpage.destroy();
// 销毁所有fullPage事件以及原始HTML标记所做的任何修改。
$.fn.fullpage.destroy('all');
// 更新DOM结构以适应新窗口大小或其内容
$.fn.fullpage.reBuild();
// 设置页面的响应模式,
$.fn.fullpage.setResponsive(true);
});
</script>
<style>
#menu {
position: fixed;
top: 0;
left: 0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- 导航 -->
<div id="menu">
<a href="#firstPage">首页</a>
<a href="#secPage">数据监测</a>
<a href="#thrPage">规划报告</a>
<a href="#fourPage">新闻中心</a>
<a href="#fivePage">关于我们</a>
</div>
<div class="swapper-box">
<div id="fullpage">
<div class="section">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</div>
<div class="section">
2
</div>
<div class="section">
3
</div>
<div class="section">
4
</div>
<div class="section">
5
</div>
<div class="section removeS" style="background-color: #CC3333;">
666666
</div>
</div>
</div>
</body>
