<link rel="stylesheet" type="text/css" href="/plugins/fullpage/jquery.fullPage.css" />
<link 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({
// 導(dǎo)航區(qū)域
// 綁定菜單盒子 ( #menu)
'menu': '#menu',
// 是否鎖定錨, 鎖定后點(diǎn)擊菜單不會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的屏 (false)
'lockAnchors':false,
// url錨參數(shù) 用戶區(qū)分當(dāng)前是哪一屏 (['firstPage','secondPage'])
'anchors':["firstPage", "secPage", "thrPage", "fourPage", "fivePage"],
// 是否開(kāi)啟導(dǎo)航點(diǎn) (false)
'navigation':true,
// 導(dǎo)航點(diǎn)位置 (right) left,right
'navigationPosition':'left',
// 開(kāi)啟導(dǎo)航點(diǎn)后 鼠標(biāo)放在小圓點(diǎn)上的提示 (['firstSlide','secondSlide'])
'navigationTooltips':['首頁(yè) ',' 數(shù)據(jù)監(jiān)測(cè)','規(guī)劃報(bào)告','新聞中心','關(guān)于我們'],
// 是否直接顯示導(dǎo)航點(diǎn)提示 (false)
'showActiveTooltip':false,
// 開(kāi)啟Slide導(dǎo)航點(diǎn)(false)
'slidesNavigation':true,
// Slide導(dǎo)航點(diǎn)位置(bottom)
'slidesNavPosition':'top',
// Scrolling 動(dòng)畫
// 每個(gè)屏幕滾動(dòng)動(dòng)畫執(zhí)行的時(shí)間，時(shí)間的單位為毫秒（ms）
'scrollingSpeed':1000,
// 定義屏幕是否自動(dòng)滾動(dòng) (true)
'autoScrolling':true,
// 默認(rèn)值：true，設(shè)置是否自適應(yīng)整個(gè)窗口的空間，以某個(gè)section的內(nèi)容為分界線，
//設(shè)置為true時(shí)，某個(gè)的section將填充到整個(gè)頁(yè)面，否者用戶可以停留在網(wǎng)頁(yè)的任何位置。
'fitToSection':true,
'fitToSectionDelay':1000,
// 是否使用瀏覽器默認(rèn)的滾動(dòng)條, 開(kāi)啟后autoScrolling配置任然生效,關(guān)閉后wow.js無(wú)效
'scrollBar':false,
// 定義了用于垂直和水平滾動(dòng)的過(guò)渡效果
'easying':'easeInOutElastic',
// 定義是否使用Js或css3,讓section和slide使用動(dòng)畫
'css3':true,
// 要定義此效果，css3屬性必須為true
// 你可以使用 CSS3 transition-timing-function 屬性 自定義多個(gè)動(dòng)畫效果，
// 例如：linear、ease-out、
// 或者使用cubic-bezier方法創(chuàng)建自定義的動(dòng)畫效果，
'easingcss3':'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
// 默認(rèn)值：false，定義屏幕滾動(dòng)到第一個(gè)后，是否循序滾動(dòng)到最后一個(gè)。
'loopTop':false,
// 默認(rèn)值：false，定義屏幕滾動(dòng)到最后一個(gè)后，是否循環(huán)滾動(dòng)到第一個(gè)。
'loopBottom':false,
// 默認(rèn)值：false，定義向下滾動(dòng)到最后一節(jié)是否應(yīng)該向下滾動(dòng)到第一個(gè)，
// 如果向上滾動(dòng)的第一部分應(yīng)該滾動(dòng)到最后一個(gè)
// loopToop、loopBottom相比 會(huì)直接滑動(dòng)到第一個(gè)或最后一個(gè)
// 不兼容loopTop和loopBottom選項(xiàng),
// 任何滾動(dòng)條存在于網(wǎng)站（scrollBar:true或autoScrolling:false）。
'continuousVertical':false,
// 默認(rèn)值：true，定義水平的幻燈片是否循環(huán)切換。
'loopHorizontal':true,
// 默認(rèn)null,避免在滾動(dòng)某些元素時(shí)滾動(dòng)屏幕, 如百度地圖放大會(huì)向上滑,將地圖容器ID設(shè)置進(jìn)來(lái)
//'normalScrollElements':['#map'],
// fullpage擴(kuò)展：定義在最后一個(gè)幻燈片中向右滑動(dòng)應(yīng)該向右滑動(dòng)到第一個(gè)還是不向左滑動(dòng)，
// 如果在第一個(gè)幻燈片中向左滾動(dòng)，應(yīng)該向左滑動(dòng)到最后一個(gè)幻燈片。
// 不兼容loopHorizontal。需要fullpage.js> = 2.8.3。
//'continuousHorizontal':false,
// fullpage擴(kuò)展：默認(rèn)false,定義是否使用鼠標(biāo)滾輪或觸控板在滑塊內(nèi)水平滑動(dòng)。
//'scrollHorizontally':false,
// fullpage擴(kuò)展：默認(rèn)false,移動(dòng)一個(gè)水平滑塊是否會(huì)迫使其他部分中的滑塊在相同方向上滑動(dòng)。
//'interlockedSlides':false,
// fullpage擴(kuò)展：默認(rèn)false,啟用或禁用使用鼠標(biāo)或手指拖動(dòng)和滑動(dòng)部分和幻燈片,
// 可選項(xiàng): true, false, fingersonly
//'dragAndMove':false,
// fullpage擴(kuò)展：默認(rèn)false,提供使用百分比非全屏部分的方法
//'offsetSections':false,
// fullpage擴(kuò)展：默認(rèn)false,是否在離開(kāi)其滑塊后重置每個(gè)滑塊
//'resetSliders':false,
// fullpage擴(kuò)展：默認(rèn)false,定義是否使用淡入淡出效果，而不是默認(rèn)滾動(dòng)效果。
// 可選項(xiàng): true, false, sections,slides
//'fadingEffect':false,
// 是否為節(jié)/幻燈片創(chuàng)建滾動(dòng)，以防其內(nèi)容大于其高度 插件scrolloverflow.min.js
//'scrollOverflow':false,
// 默認(rèn)值：true，定義是否可以使用鍵盤導(dǎo)航內(nèi)容。
////輔助功能
'keyboardScrolling':true,
// 默認(rèn)值：true，訪問(wèn)網(wǎng)站網(wǎng)址 是直接跳轉(zhuǎn)到指定屏還是從第一屏滾動(dòng)到指定屏
'animateAnchor':true,
// 默認(rèn)值：true，是否將站點(diǎn)的狀態(tài)推送到瀏覽器的歷史記錄
'recordHistory':true,
////設(shè)計(jì)
// 默認(rèn)值：true，確定是否使用控制箭頭使幻燈片向右或向左移動(dòng)。
'controlArrows':true,
// 默認(rèn)值：true，垂直居中sections中的內(nèi)容。
// 請(qǐng)考慮在afterRender回調(diào)中使用委派或加載其他腳本。
'verticalCentered':true,
// 默認(rèn)值：none，定義每個(gè)section的CSS背景演示
'sectionsColor':["#294b77", "#ffffff", "#3e8ebd", "#ffffff", "#ffffff"],
// 默認(rèn)值：0，定義每個(gè)sections的上內(nèi)邊距
'paddingTop':'100px',
// 默認(rèn)值：0， 定義每個(gè)sections的下內(nèi)邊距
'paddingBottom':'100px',
// 默認(rèn)值：null，定義哪些元素將從插件的滾動(dòng)結(jié)構(gòu)中移除,這在使用css3選項(xiàng)保持固定時(shí)是必需的
'fixedElements':'.removeS',
// 默認(rèn)值：0，當(dāng)瀏覽器的寬度小于定義值時(shí)，網(wǎng)頁(yè)將像正常網(wǎng)頁(yè)一樣滾動(dòng)，不會(huì)一屏一屏的滾動(dòng)。
'responsiveWidth':0,
// 默認(rèn)值：0，瀏覽器高度小于定義值時(shí) ，網(wǎng)頁(yè)將像正常網(wǎng)頁(yè)一樣滾動(dòng)，不會(huì)一屏一屏的滾動(dòng)。
'responsiveHeight':300,
// 自定義選擇器
// 默認(rèn)值：.section，定義用于插件section的jQuery選擇器
'sectionSelector':'.section',
// 默認(rèn)值：.slide， 定義用于插件slide的jQuery選擇器
'slideSelector':'.slide',
// 默認(rèn)值：.true， 是否啟動(dòng)延遲加載 ，使用路徑為 data-src=''
'lazyLoading':true,
// events 事件
// 用戶在離開(kāi)Section時(shí)， 在轉(zhuǎn)到新section時(shí)觸發(fā)此回調(diào), 返回false將取消移動(dòng)
// index: 離開(kāi)section的索引, 從1開(kāi)始
// nextIndex: 目標(biāo)section的索引, 從1開(kāi)始
// direction: section的滾動(dòng)方向, up或down
onLeave: function(index, nextIndex, direction){
console.log("當(dāng)前事件為：onLeave!");
console.log('離開(kāi)第'+index+"個(gè)頁(yè)面, 滑動(dòng)到第"+nextIndex+"個(gè)頁(yè)面,
當(dāng)前移動(dòng)方向："+direction);
//return false;
},
// 在滾動(dòng)結(jié)束后，section一旦被加載，回調(diào)觸發(fā)
// anchorLink： 對(duì)應(yīng)section的anchorLink
// index： section的索引, 從1開(kāi)始
afterLoad:function(anchorLink, index){
console.log("當(dāng)前事件為：afterLoad!");
console.log('當(dāng)前section是第'+index+'個(gè)頁(yè)面, 它的anchorLink為： '+anchorLink);
},
// 這個(gè)回調(diào)是在頁(yè)面結(jié)構(gòu)生成之后觸發(fā)，這是要用來(lái)初始化其他插件
afterRender: function(){
console.log("當(dāng)前事件為：afterRender!");
console.log("頁(yè)面結(jié)構(gòu)已生成?。?！");
},
// 在調(diào)整瀏覽器窗口大小后被觸發(fā)
afterResize: function(){
var pluginContainer = $(this);
console.log("當(dāng)前事件為：afterResize!");
console.log('部分已經(jīng)調(diào)整大小');
},
// fullpage.js從正常模式更改為響應(yīng)模式或從響應(yīng)模式更改為正常模式后觸發(fā)。
// isResponsive：boolean 確定是進(jìn)入響應(yīng)模式(true),還是返回正常模式(false)
afterResponsive: function(isResponsive){
console.log("當(dāng)前事件為：afterResponsive!");
console.log('isResponsive:'+isResponsive);
},
// 在滾動(dòng)結(jié)束后，加載了section的slide后，回調(diào)觸發(fā)
// anchorLink： 對(duì)應(yīng)section的anchorLink
// index：section的索引, 從1開(kāi)始
// slideAnchor：對(duì)應(yīng)slide的anchor(錨點(diǎn))
// slideIndex：slide的索引, 從1開(kāi)始(默認(rèn)slide不計(jì)數(shù))
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
console.log("當(dāng)前事件為：afterSlideLoad!");
console.log('當(dāng)前是第'+index+'個(gè)section, 它的anchor是'+anchorLink+'
.當(dāng)前slide是第'+slideIndex+'個(gè),它的anchor是'+slideAnchor);
},
// 當(dāng)用戶在離開(kāi)slide前往轉(zhuǎn)到另一個(gè)slide時(shí)，會(huì)觸發(fā)此回調(diào)。返回false將在它發(fā)生之前取消移動(dòng)。
// anchorLink：section對(duì)應(yīng)的anchorLink
// index：section的索引, 從1開(kāi)始
// slideIndex：slide的索引, 從0開(kāi)始
// direction：slide的滾動(dòng)方向, right or left
// nextSlideIndex: 目標(biāo)slide的索引
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
console.log("當(dāng)前事件為：onSlideLeave!");
console.log('當(dāng)前是第'+index+'個(gè)section, 它的anchor是'+anchorLink+'
.當(dāng)前slide是第'+slideIndex+'個(gè),它本次向'+direction+' 移動(dòng),
目標(biāo)是第'+nextSlideIndex+'個(gè)');
}
};
// 效果查看地址 http://alvarotrigo.com/fullPage/examples/methods.html#3rdPage
// 向上滾動(dòng)一個(gè)section
$.fn.fullpage.moveSectionUp();
// 向下滾動(dòng)一個(gè)section
$.fn.fullpage.moveSectionDown();
// 將頁(yè)面滑動(dòng)到指定section, 并滑動(dòng)到第2個(gè)slide
$.fn.fullpage.moveTo('firstSlide', 2);
$.fn.fullpage.moveTo(3, 0);
$.fn.fullpage.moveTo(3);
// 和moveTo相同, 直接跳轉(zhuǎn)到目標(biāo) 沒(méi)有動(dòng)畫
$.fn.fullpage.silentMoveTo('firstSlide', 2);
// 將當(dāng)前slide向右滾動(dòng)到下一張slide
$.fn.fullpage.moveSlideRight();
// 將當(dāng)前slide向左滾動(dòng)到上一張slide
$.fn.fullpage.moveSlideLeft();
// 設(shè)置頁(yè)面滾動(dòng)方式, true為自動(dòng)滾動(dòng)，false手動(dòng)正常滾動(dòng)
$.fn.fullpage.setAutoScrolling(false);
// 設(shè)置section是否在屏幕中間
$.fn.fullpage.setFitToSection(false);
// 設(shè)置定位url中的錨是否可以控制頁(yè)面滾動(dòng)
$.fn.fullpage.setLockAnchors(false);
// 禁止?jié)L動(dòng)
$.fn.fullpage.setAllowScrolling(false);
// 禁止向下滾動(dòng) all,up,down,left,right
$.fn.fullpage.setAllowScrolling(false, 'down');
// 禁用向下和向右
$.fn.fullpage.setAllowScrolling(false, 'down, right');
// 禁用所有鍵盤滾動(dòng)
$.fn.fullpage.setKeyboardScrolling(false);
// 禁用鍵盤向下滾動(dòng) all,up,down,left,right
$.fn.fullpage.setKeyboardScrolling(false, 'down');
// 禁用鍵盤向下和向右
$.fn.fullpage.setKeyboardScrolling(false, 'down, right');
// 是否為URL中的每個(gè)哈希更改歷史記錄
$.fn.fullpage.setRecordHistory(false);
// 定義滾動(dòng)速度（以毫秒為單位）
$.fn.fullpage.setScrollingSpeed(700);
// 銷毀由fullPage.js創(chuàng)建的所有JavaScript事件（滾動(dòng)，URL中的hashchange ...）
$.fn.fullpage.destroy();
// 銷毀所有fullPage事件以及原始HTML標(biāo)記所做的任何修改。
$.fn.fullpage.destroy('all');
// 更新DOM結(jié)構(gòu)以適應(yīng)新窗口大小或其內(nèi)容
$.fn.fullpage.reBuild();
// 設(shè)置頁(yè)面的響應(yīng)模式,
$.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>
<!-- 導(dǎo)航 -->
<div id="menu">
<a href="#firstPage">首頁(yè)</a>
<a href="#secPage">數(shù)據(jù)監(jiān)測(cè)</a>
<a href="#thrPage">規(guī)劃報(bào)告</a>
<a href="#fourPage">新聞中心</a>
<a href="#fivePage">關(guān)于我們</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>
