Git主页
使用
- jQuery library. (1.6.0 minimum)
- The JavaScript file jquery.fullPage.js (or its minified version jquery.fullPage.min.js)
- The css file jquery.fullPage.css
在页面中要引入的文件
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
CDN地址
CDNJS: https://cdnjs.com/libraries/fullPage.js
页面结构
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
完整的页面结构示例 demoPage.html
初始化
$(document).ready(function() {
$('#fullpage').fullpage();
});
完整选项的初始化
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: '#menu',
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: false,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
dragAndMove: false,
offsetSections: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
parallax: false,
parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
lazyLoading: true,
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterResponsive: function(isResponsive){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});
创建与section或slide的连接
注意通过anchor来进行连接也会导致url上的改变
$(document).ready(function() {
$('#fullpage').fullpage({
anchors:['firstPage', 'secondPage', 'thirdPage']
});
});
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
section也可以用data-anchor这种方法创建anchor，不过请注意data-anchor的名字不能与任何页面上id的值或元素名称相同
创建不同大小的section
使section或slide的高度由内容决定class="fp-auto-height"可以
响应式高度section用fp-auto-height-responsive
状态类
active
fp-responsive
fp-enabled
fp-destroyed
图像视频资源懒加载
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>
在fullPage.js中控制此项功能的开关
lazyLoading: false
插入媒体的自动播放
<audio data-autoplay>
<source src="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>
