fullPage.js可以很容易的创建一个全屏幕滚动的网站,增加了平滑滚动效果和垂直滑块,兼容老版本浏览器。
快速上手
页面引入(必须)
<script src="jquery.min.js"></script>
<script src="jquery.fullPage.js"></script>
如果你希望用到滑动自带的导航,可以引入
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
出现滚动条,适合超出一屏或者更长的页面,可以引入
<script type="text/javascript" src="scrolloverflow.min.js"></script>
html基本结构,每一个section就是一屏
<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>
每一个竖屏还可以包含一些横向滑动,只需要将‘slide’包含在‘section’内
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>
如果你希望默认首页是你指定的某一屏,可以在这屏上加上‘active’
<div class="section active">Some section</div>
初始化fullpage.js以及常用的选项和函数
$(document).ready(function() {
function initialization(){
$('#myContainer').fullpage({
sectionsColor: ['#4A6FB1', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], //每一屏的背景颜色
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], //每一屏的锚点名
resize: false, //字体是否随着窗口缩放而缩放
animateAnchor:false,
scrollOverflow: true, //内容超过满屏后是否显示滚动条
autoScrolling:true, //是否使用插件的滚动方式,如果选择false,则会出现浏览器自带的滚动条
responsive: 900, //响应时间
menu: '#menu', //定义菜单
navigation:true, //是否显示导航
continuousVertical:true, //是否循环滚动,与 loopTop 及 loopBottom 不兼容
paddingTop: '20px', //上部内边距
css3: true, //是否使用 CSS3 transforms 滚动
//滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;nextIndex 是滚动到的“页面”的序号,从1开始计算;direction 判断往上滚动还是往下滚动,值是 up 或 down。
onLeave: function(index, nextIndex, direction){
console.log("onLeave--" + "index: " + index + " nextIndex: " + nextIndex + " direction: " + direction);
},
//滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算
afterLoad: function(anchorLink, index){
console.log("afterLoad--" + "anchorLink: " + anchorLink + " index: " + index );
},
//滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
console.log("afterSlideLoad--" + "anchorLink: " + anchorLink + " index: " + index + " slideAnchor: " + slideAnchor + " slideIndex: " + slideIndex);
},
//某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave: function(anchorLink, index, slideIndex, direction){
console.log("onSlideLeave--" + "anchorLink: " + anchorLink + " index: " + index + " slideIndex: " + slideIndex + " direction: " + direction);
},
//页面结构生成后的回调函数,或者说页面初始化完成后的回调函数
afterRender: function(){
console.log("afterRender");
},
//页面结构重新调整后的回调函数
afterResize: function(){
console.log("afterResize");
}
});
//fullPage.js 初始化
initialization();
$('#div').click(function(e){
e.preventDefault();
do something;
});
});
更多选项、方法和回调函数请移步到官方网站:
2017-09-02