一、插件介绍
如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面,QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
二、插件图片示例
三、插件作者下载地址
作者:Alvaro Trigo
官方网址: https://github.com/alvarotrigo/fullPage.js
目前版本: 2.0.7
官方案例下载: http://www.ijquery.cn/study/demo/fullpage/fullPage.js-2.0.7.zip
四、兼容性
兼容 jQuery 1.7+,建议使用 1.9+ 版本,效率更高。
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE8+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
五、使用教程
引用文件:
<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 --> <script src="js/jquery.easings.min.js"></script> <!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 --> <script src="js/jquery.slimscroll.min.js"></script> <script src="js/jquery.fullPage.js"></script>
HTML代码:
<div id="fullpage"> <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> </div>
JS代码:
$(function(){ $('#fullpage').fullpage(); });
六、插件参数
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
sectionContainer | 字符串 | section | 绑定/制定元素,可以是标签或 class |
easing | 字符串 | ease | 动画过度效果,可选 ease / linear / ease-in |
animationTime | 整数 | 1000 | 动画过度时间,以毫秒为单位 |
pagination | 布尔值 | true | 显示右侧圆点项目导航 |
updateURL | 布尔值 | false | URL 显示命名锚记 |
beforeMove | 函数 | 滚动前的回调函数 | |
afterMove | 函数 | 滚动后的回调函数 | |
loop | 布尔值 | true | 循环滚动 |
keyboard | 布尔值 | true | 键盘控制,支持左右上下/ Page Up / Page Donw / Home / End |
responsiveFallback | 布尔值/整数 | false | 回退,即使用浏览器自带滚动,默认我 false,既不使用浏览器自带滚动。也可以指定一个固定值,当页面的宽度小于这个值时,将自动回退 |
direction | 字符串 | vertical | 页面滚动方向,可选 vertical(垂直/竖向)和 horizontal(水平/横向) |
公共方法
方法 | 说明 |
---|---|
moveUp() | 向上滚动 |
moveDown() | 向下滚动 |
moveTo(page_index) | 滚动到,如 $(‘.main’).moveTo(3); |