全屏视觉差滚动插件-FullPage

说到滚屏插件，我主要接触过touchSwipe和FullPage，两者各有优点吧。就我个人认为，前者更加适合新手，简单，易上手；后者适合高端的开发者。

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。

今天主要想给大家介绍的是FullPage了，如何实现全屏滚动且实现视觉差效果，至于touchSwipe以后也会讲到。

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

兼容 jQuery 1.7+

IE8/谷歌/火狐/Opera/苹果浏览器

每个page代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 page 加上 class="current”，如：

nextIndex 是滚动到的“页面”的序号，从1开始计算；

direction 判断往上滚动还是往下滚动，值是 up 或 down。

我们可以看几个案例：

DEMO

k88编程网

#FullPage.html”>k88编程网/FullPage.html