fullPage.js 全屏滚动插件
2016-10-07 本文已影响67人
black白先森
- 配置项部分介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏滚动</title>
<style>
.section {
text-align: center;
}
.section1 {
background-color: #ccc;
}
.section2 {
background-color: #058;
}
.section3 {
background-color: lightblue;
}
.section4 {
background-color: blue;
}
#header {
position: fixed; /*要固定定位才行*/
top: 0;
right: 200px;
background-color: red;
}
#fullPageMenu {
position: fixed;
top: 20px;
left: 10px;
color: #000;
/*background-color: #000;*/
z-index: 10;
}
#fullPageMenu li {
color: #000;
}
</style>
<link rel="stylesheet" href="./jquery.fullpage.css">
<script src="./jquery.js"></script>
<script src="./jquery.fullpage.js"></script>
</head>
<body>
<!-- 关于配置项menu -->
<ul id="fullPageMenu">
<li data-menuanchor="page1"><a href="#page1">section1</a></li>
<li data-menuanchor="page2"><a href="#page2">section2</a></li>
<li data-menuanchor="page3"><a href="#page3">section3</a></li>
<li data-menuanchor="page4"><a href="#page4">section4</a></li>
</ul>
<div id="header">head</div>
<div id="fullpage">
<div class="section section1">Some section1</div>
<div class="section section2">
<div class="slide" data-anchor="slide1">slide1</div>
<div class="slide" data-anchor="slide2">slide2</div>
<div class="slide" data-anchor="slide3">slide3</div>
<div class="slide" data-anchor="slide4">slide4</div>
</div>
<div class="section section3">Some section</div>
<div class="section section4">Some section</div>
</div>
<script>
$(document).ready(function() {
var options = {
//Navigation
menu: '#fullPageMenu',//绑定菜单，设定相关属性与anchors值对应后，菜单可以控制滚动
lockAnchors: false, // 开启锚点
anchors:['page1', 'page2','page3','page4'],//锚点名称
navigation: true,// 开启主页面导航，右侧
navigationPosition: 'left',// 导航方位，只有右侧、左侧
navigationTooltips: ['firstSlide', 'secondSlide','aaa','bbb'],// 导航放上去的tips
showActiveTooltip: true,// 当翻到当前页时是否显示tooltips
slidesNavigation: true, // 子导航是否显示
slidesNavPosition: 'bottom',// 子导航显示方位 只有top、bottom两个选项
//Scrolling
css3: true,
scrollingSpeed: 700, // 翻页速度
autoScrolling: true,// 是否按插件本身方式滚动,false,会出现浏览器滚动条，而且不按页滚动
fitToSection: false,
fitToSectionDelay: 1000,
scrollBar: false, // 是否显现滚动条,按页滚动和浏览器自带滚动都有效
easing: 'easeInOutCubic',// 要引入jquery.easings插件
easingcss3: 'ease',
loopBottom: true,// 滚动到最底部是否连续滚动回顶部
loopTop: true,// 滚动到最顶部是否连续滚动回底部
loopHorizontal: true,// 横向slider幻灯片是否循环滚动
continuousVertical: false,// 是否循环滚动,与loopBottom,loopTop不要同时设置
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,//内容超过满屏后是否显示滚动条,可用jquery.slimscroll插件模拟滚动条
scrollOverflowOptions: null,
touchSensitivity: 15,// 移动设备中滑动页面的敏感性，越大越难滑动
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,// 是否可以用方向键导航
animateAnchor: true,// 锚链接是否可以控制滚动动画
recordHistory: true,//是否可以通过浏览器前进后退来记录历史,如果设置autoScrolling:false,此配置将被关闭
//Design
controlArrows: true,// 箭头是否显示
verticalCentered: true,//文本是否垂直居中
sectionsColor : ['#ccc', '#fff'],// 每一屏背景颜色
paddingTop: '3em',// 每个section顶部和底部padding
paddingBottom: '10px',// 如果需要顶部或底部菜单，那就可以改动这个值
fixedElements: '#header, .footer',//固定元素，需要配置jquery选择器,页面滚动时固定不动
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
//Custom selectors
sectionSelector: '.section',//选择器类名
slideSelector: '.slide',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
};
$('#fullpage').fullpage(options);
});
</script>
</body>
</html>
