全屏滚动插件fullPage.js

jquery

前言

一直在想关于页面怎么写，因为真的不知道怎么介绍自己，然后就想到很多公司发布新产品时都会在官网上放个全屏滚动的单页面，真是时尚时尚又时尚。知道了fullPage.js可以实现这种效果。一开始让我用fullPage.js其实我是拒绝的，因为我觉得这种全屏滚动的效果我自己也能写出来。后来尝试了下发现写不出像它那么炫酷还能回调的效果。于是我就转过去抱fullPage.js的大腿了。

一，基本用法

1，引入文件

<!-- 引入css -->
<link href="http://cdn.bootcss.com/fullPage.js/2.6.9/jquery.fullPage.min.css" rel="stylesheet">
<!-- fullpage.js依赖于jquery库 -->
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>    
<!-- 如果要使用css3动画就要引入easing文件-->
<script src="http://cdn.bootcss.com/fullPage.js/2.6.9/vendors/jquery.easings.min.js"></script>
<script src="http://cdn.bootcss.com/fullPage.js/2.6.9/jquery.fullPage.min.js"></script>

2，html结构

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
    <div class="section">第四屏</div>
</div>

3,js用法

$(document).ready(function() {
    $('#fullpage').fullpage();
});

这样没有任何参数的fullpage出来的效果很丑，但已经能全屏滚动了。

二，加参数

$("#fullpage").fullpage({
	//Design
	sectionsColor:['green','blue','#C2F19A','#3CEABE'],//每屏的背景色
	css3:true,
	resize:true,//字体自适应
	navigation:true,//显示项目导航
	navigationColor:'#10AD72',
	continuousVertical: true,//循环滚动
	anchors: ['page1', 'page2', 'page3', 'page4'],//锚点链接
	afterLoad:function(anchorLink,index){//加载到这一屏执行的函数
		if (index==1||index==2) {
			$('.section').find('p').delay(500).animate({
               left: '40%'
            }, 1500, 'easeOutExpo');
        };              
    } 
});

更多参数请参见http://www.dowebok.com/77.html和https://github.com/alvarotrigo/fullPage.js

三，一些坑

上面那些都可以在官方文档中找到使用方法，然而下面才是我想要讲的，这是我遇到的坑，自己摸索出来的解决方法。关于fullpage的显示隐藏问题。

我的博客要适应手机端，手机屏幕太小了，我觉得全屏滚动无法在手机上显示，所以就想让这个全屏滚动页面在分辨率小于768px时隐藏，其他情况下显示。然后再写个div让它在小于768px下显示，就是我想在手机显示的关于页面的内容。html结构大概是这样的:

<style type="text/css">
@media only screen and (max-width: 768px){
    #mabout{
        display: block;
    }
    #fullpage{
        display: none;
    }
}
</style>
<div id="mabout" hidden></div>
<div id="fullpage"></div>

但当#mabout里面的内容超过一屏时，它就自动截断了，连个纵向滚动条都没有。可是我明明在手机上把fullpage里面的内容隐藏了，怎么还会受影响。仔细瞅瞅发现鼠标滚动时地址栏里的锚点还在变（我通过在PC上缩小浏览器窗口测试手机页面）。这说明fullpage页面还存在，虽然DOM里隐藏了，但不知道什么原因还受fullpage.js的影响。我把fullpage的参数scrollOverfloat设为true,意思是满屏后产生滚动条，然而并没有用。

后来我想把fullpage这个div全部删掉而不是隐藏应该就没事了。果然可以！
我是用js实现的。

//当分辨率<768px时移除#fullpage
var screenWidth=window.screen.width;//原生js方法，jquery没有
if (screenWidth<768) {
    $("#fullpage").remove();
};

就是这么简单！

后记

其实我以前不知道怎么在不同的分辨率下调用不同的js，这次碰到这个问题需要判断分辨率就去搜了这个方法window.screen.width，原来这么简单！以后就会用了。