简介
我们通常会看到一些全屏网站,特别是一些国外网站。这些网站有一个共同的特点,那就是每个页面用一个很大的图片或者色块做背景,再添加一些简单的内容,这样看起来显得高大上。这些全屏效果都是由jQuery
的全屏滚动插件fullPage.js
做成的。
fullPage.js
是一个基于jQuery
的插件,它能够很方便,很轻松的制作出全屏网站。fullPage.js
主要有以下几种功能:
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持
CSS3
动画 - 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
fullPage.js
兼容性
jQuery
兼容:兼容jQuery
1.7以上的版本- 浏览器兼容:兼容
IE8
以上,Chrome,Firefox,Opera,Safari
fullPage.js
使用方法
- 引入文件:需要几个集成的
CSS,js
文件,如下代码
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的 jQuery UI 代替,如果不需要设置 easing 参数,可去掉该文件 -->
<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
: 使用fullPage.js
有基本的页面架构,如下代码
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
</div>
<div class="section">
<h3>第二屏</h3>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
上述的代码,每个 section
代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 section
加上 class=”active”
,如:
<div class="section active">第三屏</div>
同时,可以在section
内加入 slide
,如:
<div id="dowebok">
<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>
- 基本
JavaScript
:给滚动页面做一些动态的效果,当然少了不js
代码,如下是基本的使用滚动页面
$(function(){
$('#dowebok').fullpage();
});
fullPage
配置
fullPage
需要做一些简单,容易理解的配置,给页面实现一些简单的效果,如每一屏的背景颜色,循环滚动等,这些都是在屏幕对象上做一些选项,在$('#dowebok').f