演示下载：http://pan.baidu.com/s/1gdwvOwr
如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（查看），QQ浏览器的官网站（查看）。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
兼容性
fullPage.js 支持 IE8+ 及其他现代浏览器。
使用方法
1、引入文件
|
1
2
3
4
|
<link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><script src="js/jquery-ui.min.js"></script><script src="js/jquery.fullPage.js"></script> |
2、HTML
|
1
2
3
4
5
6
7
8
9
|
<div class="section">第一屏</div><div class="section">第二屏</div><div class="section"> <div class="slide">第三屏的第一屏</div> <div class="slide">第三屏的第二屏</div> <div class="slide">第三屏的第三屏</div> <div class="slide">第三屏的第四屏</div></div><div class="section">第四屏</div> |
3、JavaScript
|
1
2
3
4
5
6
|
$(document).ready(function() { $.fn.fullpage({ slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], anchors: ['page1', 'page2', 'page3', 'page4'] });}); |
经测试，最好至少有 anchors 这个参数，否则在火狐浏览器中，第一次滚动会直接滚到底部。
参数
| 参数 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| verticalCentered | 字符串 | 内容是否垂直居中 | true |
| resize | 布尔值 | 字体是否随着窗口缩放而缩放 | false |
| slidesColor | 函数 | 设置背景颜色，如： | 无 |
| anchors | 数组 | 定义锚链接 | 无 |
| scrollingSpeed | 整数 | 滚动速度，单位为毫秒 | 700 |
| easing | 字符串 | 滚动动画方式 | easeInQuart |
| menu | 布尔值 | 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 | false |
| navigation | 布尔值 | 是否显示项目导航 | false |
| navigationPosition | 字符串 | 项目导航的位置，可选 left 或 right | right |
| navigationColor | 字符串 | 项目导航的颜色 | #000 |
| navigationTooltips | 数组 | 项目导航的 tip | 无 |
| slidesNavigation | 布尔值 | 是否显示左右滑块的项目导航 | false |
| slidesNavPosition | 字符串 | 左右滑块的项目导航的位置，可选 top 或 bottom | bottom |
| controlArrowColor | 字符串 | 左右滑块的箭头的背景颜色 | #fff |
| loopBottom | 布尔值 | 滚动到最底部后是否滚回顶部 | false |
| loopTop | 布尔值 | 滚动到最顶部后是否滚底部 | false |
| loopHorizontal | 布尔值 | 左右滑块是否循环滑动 | true |
| autoScrolling | 布尔值 | 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 | true |
| scrollOverflow | 布尔值 | 内容超过满屏后是否显示滚动条 | false |
| css3 | 布尔值 | 是否使用 JavaScript 或 CSS3 transforms 滚动 | false |
| paddingTop | 字符串 | 与顶部的距离 | 0 |
| paddingBottom | 字符串 | 与底部距离 | 0 |
| fixedElements | 字符串 | 无 | |
| normalScrollElements | 无 | ||
| afterLoad | 函数 | 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 | 无 |
| onLeave | 函数 | 滚动前的回调函数，接收 index 和 direction 两个参数，index 是序号，从1开始计算，direction 判断往上滚动还是往下滚动 | 无 |
| afterRender | 函数 | 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 | 无 |
| afterSlideLoad | 函数 | 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数 | 无 |
| onSlideLeave | 函数 | 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数 | 无 |
fullPage.js GitHub 地址：https://github.com/alvarotrigo/fullPage.js