本文共 5419 字，大约阅读时间需要 18 分钟。
fullPage.js和fullPage都能实现全屏滚动，二者区别是：fullPage.js需依赖于JQuery库，而fullPage不需要依赖任何一个js库，可以单独使用。
一、fullPage.js实现全屏
fullPage.js是开源的JQuery插件库，其Github地址：
1、基本演示
1.1 引入文件
1.2 css：引入的css并不是给元素设置样式的，元素的样式需要自己写
1.3 html：每一个section代码一屏，默认从第一屏显示，若需要自定义从某屏开始显示，为section添加active类。示例默认从第三屏显示
每一个section是一屏，这是第一屏
每一个section是一屏，这是第二屏
每一个section是一屏，这是第三屏
每一个section是一屏，这是第四屏
1.4 js:
效果：
1.5 可以在某屏中再添加子滚动屏，借助slide类。修改上述第二个section如下：
第二屏的第一屏
第二屏的第二屏
第二屏的第三屏
第二屏的第四屏
效果：
1.6 添加背景屏，在html添加两个section
每一个section是一屏，这是第5屏--图片背景
每一个section是一屏，这是第6屏--图片背景
.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;}.section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;} 效果： （滚动到5和6屏）
$(function() { $("#ido").fullpage( { continuousVertical: true });}); 效果： （滚动到第6屏，再向下滚动时自动回到第一屏）
1.8 绑定菜单：添加菜单项
添加css
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}#menu li { float: left; margin: 0 10px 0 0; font-size: 14px;}#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}#menu .active a { color: #fff; background-color: #333;} 修改js
$(function() { $("#ido").fullpage( { continuousVertical: true, //循环演示 //绑定菜单 anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'], menu: '#menu', }); }); 效果：
1.9 导航演示：设置’navigation': true,
$(function() { $("#ido").fullpage( { continuousVertical: true, //循环演示 //绑定菜单 anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'], menu: '#menu', // 导航 'navigation': true, }); }); 效果： （导航在右侧）
如果需要配置easing和scrollOverflow，则需要引入额外的js（在vendors目录下）
二、fullPage实现全屏
fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。其Github地址：
1、基本演示
1.1 垂直滚动
css
body { width: 100%; *cursor: default; overflow: hidden; font: 16px/1.5 "Microsoft YaHei"; } div,p { margin: 0; padding: 0; } ul { list-style: none; } #pageContain { overflow: hidden; } .page { display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } .contain { width: 100%; height: 100%; display: none; position: relative; z-index: 0; } .current .contain,.slide .contain { display: block; } .current { display: block; z-index: 1; } .slide { display: block; z-index: 2; } .page1 { background: #37c1e3; } .page2 { background: #009922; } .page3 { background: #992211; } .page4 { background: #ff00ff; } .page5 { background: #00ff00; } .page6 { background: #22ffff; } #navBar { z-index: 3; position: absolute; top: 10%; right: 3%; } #navBar .active { background: #ccc; } #navBar li { cursor: pointer; margin-bottom: 10px; transition: all .7s ease; border-radius: 50%; line-height: 40px; text-align: center; width: 40px; height: 40px; }h1 { text-align: center; margin-top: 20%; } html
第一屏
第二屏
第三屏
第四屏
第五屏
js
var runPage;runPage = new FullPage({ id: 'pageContain', slideTime: 800, effect: { transform: { translate: 'Y' //垂直滚动，改为X则是水平滚动 }, opacity: [0, 1] }, mode: 'wheel, touch, nav:navBar', easing: 'ease'}); var runPage;runPage = new FullPage({ id: 'pageContain', slideTime: 800, effect: { transform: { translate: 'X', scale: [0, 1], rotate: [270, 0] }, opacity: [0, 1] }, mode: 'wheel, touch, nav:navBar', easing: 'ease'}); 效果：
var runPage, interval, autoPlay; autoPlay = function(to) { clearTimeout(interval); interval = setTimeout(function() { runPage.go(to); }, 1000); } runPage = new FullPage({ id: 'pageContain', slideTime: 800, effect: { transform: { translate: 'X', scale: [0, 1], rotate: [270, 0] }, opacity: [0, 1] }, mode: 'wheel, touch, nav:navBar', easing: 'ease', callback: function(index, thisPage){ index = index + 1 > 3 ? 0 : index + 1; autoPlay(index); } }); interval = setTimeout(function() { runPage.go(runPage.thisPage() + 1); }, 1000); 2、配置如图
转载地址：http://uytgi.baihongyu.com/