收藏，1.8k 浏览
fullPage.js和fullPage都能实现全屏滚动，二者区别是：fullPage.js需依赖于JQuery库，而fullPage不需要依赖任何一个js库，可以单独使用。
一、fullPage.js实现全屏
fullPage.js是开源的JQuery插件库，其Github地址：
1、基本演示
&!-- 引入css --&
&link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" /&
&!-- fullpage.js依赖于jquery库 --&
&script type="text/javascript" src="./jquery.js"&&/script&
&script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.min.js"&&/script&
css：引入的css并不是给元素设置样式的，元素的样式需要自己写
&style type="text/css"&
color: #FFFFFF;
background-color: #BFDA00;
background-color: #2EBE21;
background-color: #2C3E50;
background-color: #FF9900;
html：每一个section代码一屏，默认从第一屏显示，若需要自定义从某屏开始显示，为section添加active类。示例默认从第三屏显示
&div id="ido"&
&div class="section section1"&
&h1&每一个section是一屏，这是第一屏&/h3&
&div class="section section2"&
&h1&每一个section是一屏，这是第二屏&/h3&
&div class="section section3 active"&
&h1&每一个section是一屏，这是第三屏&/h3&
&div class="section section4"&
&h1&每一个section是一屏，这是第四屏&/h3&
&script type="text/javascript"&
$(function() {
$("#ido").fullpage();
可以在某屏中再添加子滚动屏，借助slide类。修改上述第二个section如下：
&div class="section section2" style="text-align:center"&
&h1 class="slide"&第二屏的第一屏&/h1&
&h1 class="slide"&第二屏的第二屏&/h1&
&h1 class="slide"&第二屏的第三屏&/h1&
&h1 class="slide"&第二屏的第四屏&/h1&
添加背景屏，在html添加两个section
&div class="section section5"&
&h1&每一个section是一屏，这是第5屏--图片背景&/h3&
&div class="section section6"&
&h1&每一个section是一屏，这是第6屏--图片背景&/h3&
.section5 { background: url(http://idowebok./77/1.jpg) 50%;}
.section6 { background: url(http://idowebok./77/2.jpg) 50%;}
效果：http://denon-7c931.coding.io/bjfull.html
（滚动到5和6屏）
循环演示：continuousVertical设置为true
$(function() {
$("#ido").fullpage(
continuousVertical: true
效果： （滚动到第6屏，再向下滚动时自动回到第一屏）
1.8 绑定菜单：添加菜单项
&ul id="menu"&
&li data-menuanchor="page1" class="active"&&a href="#page1"&第一屏&/a&&/li&
&li data-menuanchor="page2"&&a href="#page2"&第二屏&/a&&/li&
&li data-menuanchor="page3"&&a href="#page3"&第三屏&/a&&/li&
&li data-menuanchor="page4"&&a href="#page4"&第四屏&/a&&/li&
&li data-menuanchor="page5"&&a href="#page5"&第5屏&/a&&/li&
&li data-menuanchor="page6"&&a href="#page6"&第6屏&/a&&/li&
#menu { margin: 0; padding: 0; position: left: 10 top: 10 list-style-type: z-index: 70;}
#menu li { float: margin:
0 10px 0 0; font-size: 14}
#menu a { float: padding: 10px 20 background-color: # color: #333; text-decoration:}
#menu .active a { color: # background-color: #333;}
$(function() {
$("#ido").fullpage(
continuousVertical: true,
//循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu',
导航演示：设置’navigation': true,
$(function() {
$("#ido").fullpage(
continuousVertical: true,
//循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu',
'navigation': true,
效果： （导航在右侧）
2、配置如图
如果需要配置easing和scrollOverflow，则需要引入额外的js（在vendors目录下）
&!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 --&
&script type="text/javascript" src="./fullPage.js-master/vendors/jquery.easings.min.js"&&/script&
&!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 --&
&script type="text/javascript" src="./fullPage.js-master/vendors/jquery.slimscroll.min.js"&&/script&
二、fullPage实现全屏
fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。其Github地址：/powy1993/fullpage
1、基本演示
&script type="text/javascript" src="./fullpage-master/js/fullPage.min.js"&&/script&
width: 100%;
font: 16px/1.5 "Microsoft YaHei";
margin: 0;
padding: 0;
list-style:
#pageContain {
width: 100%;
height: 100%;
.contain {
width: 100%;
height: 100%;
z-index: 0;
.current .contain,.slide .contain {
.current {
z-index: 1;
z-index: 2;
background: #37c1e3;
background: #009922;
background: #992211;
background: #ff00
background: #00ff00;
background: #22
z-index: 3;
right: 3%;
#navBar .active {
background: #
#navBar li {
margin-bottom: 10
transition: all .7
border-radius: 50%;
line-height: 40
text-align:
height: 40
text-align:
margin-top: 20%;
&div id="pageContain"&
&div class="page page1 current"&
&div class="contain"&
&h1 class="txt"&第一屏&/h1&
&div class="page page2"&
&div class="contain"&
&h1 class="txt"&第二屏&/h1&
&div class="page page3"&
&div class="contain"&
&h1 class="txt"&第三屏&/h1&
&div class="page page4"&
&div class="contain"&
&h1 class="txt"&第四屏&/h1&
&div class="page page5"&
&div class="contain"&
&h1 class="txt"&第五屏&/h1&
&ul id="navBar"&
&li&1&/li&
&li&2&/li&
&li&3&/li&
&li&4&/li&
&li&5&/li&
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
transform: {
translate: 'Y'
//垂直滚动，改为X则是水平滚动
opacity: [0, 1]
mode: 'wheel, touch, nav:navBar',
easing: 'ease'
css3动画：修改js就行
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
transform: {
translate: 'X',
scale: [0, 1],
rotate: [270, 0]
opacity: [0, 1]
mode: 'wheel, touch, nav:navBar',
easing: 'ease'
自动滚动，js修改如下
var runPage, interval, autoP
autoPlay = function(to) {
clearTimeout(interval);
interval = setTimeout(function() {
runPage.go(to);
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
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);
2、配置如图
你可能感兴趣的文章
21 收藏，1.7k 浏览
不要错过 TA 的任何更新
如果这篇文章对你有帮助，记得点赞收藏哦，你的支持是我们的动力 ^___^
本文隶属于专栏
分享到微博？
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
内容质量差，或不适合在本网站出现
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：onepage-scroll – jQuery单页/全屏滚动插件
单页/全屏滚动页面越来越常见了，它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件，如之间介绍的 fullPage.js 和 Scrollify，今天再介绍一款 jQuery 单页/全屏滚动插件——onepage-scroll。
onepage-scroll 还算小巧，min 版本仅 9kb，它有如下功能、特点：
（不）显示右侧圆点项目导航
（不）显示命名锚记
循环/禁止循环
回退（使用浏览器自带滚动）/指定回退
支持键盘控制，左右上下/ Page Up / Page Donw / Home / End 等
水平/横向滚动
jQuery 兼容
兼容 jQuery 1.4.3+，建议使用 1.9+ 版本，效率更高。
浏览器兼容
onepage-scroll 使用了 CSS3 transform 属性，所以不兼容 IE10 以下的浏览器。你可以设置 responsiveFallback: true 使页面在 IE8、IE9 中能够正常浏览。
1、引入文件
&link rel="stylesheet" href="css/onepage-scroll.css"&
&script src="js/jquery.min.js"&&/script&
&script src="js/jquery.onepage-scroll.min.js"&&/script&
&div class="main"&
&section&第一屏&/section&
&section&第二屏&/section&
&section&第三屏&/section&
&section&第四屏&/section&
3、JavaScript
$(function(){
$('.main').onepage_scroll();
基本属性/方法
sectionContainer
绑定/制定元素，可以是标签或 class
动画过度效果，可选 ease / linear / ease-in
animationTime
动画过度时间，以毫秒为单位
pagination
显示右侧圆点项目导航
URL 显示命名锚记
beforeMove
滚动前的回调函数
滚动后的回调函数
键盘控制，支持左右上下/ Page Up / Page Donw / Home / End
responsiveFallback
布尔值/整数
回退，即使用浏览器自带滚动，默认我 false，既不使用浏览器自带滚动。也可以指定一个固定值，当页面的宽度小于这个值时，将自动回退
页面滚动方向，可选 vertical（垂直/竖向）和 horizontal（水平/横向）
moveDown()
moveTo(page_index)
滚动到，如 $(‘.main’).moveTo(3);
Github 地址：
& CopyRightfullPage.js和fullPage都能实现全屏滚动，二者区别是：fullPage.js需依赖于JQuery库，而fullPage不需要依赖任何一个js库，可以单独使用。一、fullPage.js实现全屏 fullPage.js是开源的JQuery插件库，其Github地址： /alvarotrigo/fullPage.js 1、基本演示1.1 引入文件&!-- 引入css --&&link rel=&stylesheet& type=&text/css& href=&./fullPage.js-master/jquery.fullPage.css& /&&!-- fullpage.js依赖于jquery库 --&&script type=&text/javascript& src=&./jquery.js&&&/script&&script type=&text/javascript& src=&./fullPage.js-master/jquery.fullPage.min.js&&&/script&1.2 css：引入的css并不是给元素设置样式的，元素的样式需要自己写 &style type=&text/css&&
color: #FFFFFF;
background-color: #BFDA00;
background-color: #2EBE21;
background-color: #2C3E50;
background-color: #FF9900;
} &/style&1.3 html：每一个section代码一屏，默认从第一屏显示，若需要自定义从某屏开始显示，为section添加active类。示例默认从第三屏显示&div id=&ido&& &div class=&section section1&&
&h1&每一个section是一屏，这是第一屏&/h3& &/div& &div class=&section section2&&
&h1&每一个section是一屏，这是第二屏&/h3& &/div& &div class=&section section3 active&&
&h1&每一个section是一屏，这是第三屏&/h3& &/div& &div class=&section section4&&
&h1&每一个section是一屏，这是第四屏&/h3& &/div&&/div&1.4 js:&script type=&text/javascript&&$(function() {$(&#ido&).fullpage();});&/script& 效果： http://denon-7c931.coding.io/fullpagejs.html 1.5 可以在某屏中再添加子滚动屏，借助slide类。修改上述第二个section如下：&div class=&section section2& style=&text-align:center&&&h1 class=&slide&&第二屏的第一屏&/h1&&h1 class=&slide&&第二屏的第二屏&/h1&&h1 class=&slide&&第二屏的第三屏&/h1&&h1 class=&slide&&第二屏的第四屏&/h1&&/div&1.6 添加背景屏，在html添加两个section&div class=&section section5&&&h1&每一个section是一屏，这是第5屏--图片背景&/h3&&/div&&div class=&section section6&&&h1&每一个section是一屏，这是第6屏--图片背景&/h3&&/div&添加css.section5 { background: url(http://idowebok./77/1.jpg) 50%;}.section6 { background: url(http://idowebok./77/2.jpg) 50%;}效果：http://denon-7c931.coding.io/bjfull.html（滚动到5和6屏）1.7 循环演示：continuousVertical设置为true$(function() {$(&#ido&).fullpage({continuousVertical: true});}); 效果： http://denon-7c931.coding.io/xhfull.html （滚动到第6屏，再向下滚动时自动回到第一屏） 1.8 绑定菜单：添加菜单项&ul id=&menu&& &li data-menuanchor=&page1& class=&active&&&a href=&#page1&&第一屏&/a&&/li& &li data-menuanchor=&page2&&&a href=&#page2&&第二屏&/a&&/li& &li data-menuanchor=&page3&&&a href=&#page3&&第三屏&/a&&/li& &li data-menuanchor=&page4&&&a href=&#page4&&第四屏&/a&&/li& &li data-menuanchor=&page5&&&a href=&#page5&&第5屏&/a&&/li& &li data-menuanchor=&page6&&&a href=&#page6&&第6屏&/a&&/li&&/ul&添加css#menu { margin: 0; padding: 0; position: left: 10 top: 10 list-style-type: z-index: 70;}#menu li { float: margin:0 10px 0 0; font-size: 14}#menu a { float: padding: 10px 20 background-color: # color: #333; text-decoration:}#menu .active a { color: # background-color: #333;}修改js$(function() {
$(&#ido&).fullpage(
continuousVertical: true,//循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu',
}); 效果： http://denon-7c931.coding.io/memufull.html 1.9 导航演示：设置’navigation': true,$(function() {
$(&#ido&).fullpage(
continuousVertical: true,//循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu',
'navigation': true,
}); 效果： http://denon-7c931.coding.io/navfull.html （导航在右侧） 2、配置如图
如果需要配置easing和scrollOverflow，则需要引入额外的js（在vendors目录下）&!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 --&&script type=&text/javascript& src=&./fullPage.js-master/vendors/jquery.easings.min.js&&&/script&&!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 --&&script type=&text/javascript& src=&./fullPage.js-master/vendors/jquery.slimscroll.min.js&&&/script&二、fullPage实现全屏 fullPage 是一款不依赖任何 js 库的全屏滚动组件，支持垂直/水平滚动、CSS3 旋转/缩放动画，支持 IE5.5+，支持移动设备。其Github地址：/powy1993/fullpage1、基本演示 &script type=&text/javascript& src=&./fullpage-master/js/fullPage.min.js&&&/script& 1.1 垂直滚动cssbody { width: 100%;
*cursor: overflow: font: 16px/1.5 &Microsoft YaHei&;}div,p { margin: 0; padding: 0;}ul {
list-style:}#pageContain { overflow:}.page { display: width: 100%; height: 100%; overflow: position: top: 0; left: 0;}.contain { width: 100%; height: 100%; display: position: z-index: 0;}.current .contain,.slide .contain { display:}.current { display: z-index: 1;}.slide { display: z-index: 2;}.page1 { background: #37c1e3;}.page2 { background: #009922;}.page3 { background: #992211;}.page4 { background: #ff00}.page5 { background: #00ff00;}.page6 { background: #22}#navBar { z-index: 3; position: top: 10%; right: 3%;}#navBar .active { background: #}#navBar li { cursor: margin-bottom: 10 transition: all .7 border-radius: 50%; line-height: 40 text-align: width: 40 height: 40}h1 {
text-align:
margin-top: 20%; }html&div id=&pageContain&&&div class=&page page1 current&& &div class=&contain&&
&h1 class=&txt&&第一屏&/h1& &/div&&/div&&div class=&page page2&& &div class=&contain&&
&h1 class=&txt&&第二屏&/h1& &/div&&/div&&div class=&page page3&& &div class=&contain&&
&h1 class=&txt&&第三屏&/h1& &/div&&/div&&div class=&page page4&& &div class=&contain&&
&h1 class=&txt&&第四屏&/h1& &/div&&/div&&div class=&page page5&& &div class=&contain&&
&h1 class=&txt&&第五屏&/h1& &/div&&/div&&/div&&ul id=&navBar&& &li&1&/li& &li&2&/li& &li&3&/li& &li&4&/li& &li&5&/li&&/ul&jsvar runPrunPage = new FullPage({ id: 'pageContain', slideTime: 800, effect: {
transform: {
translate: 'Y' //垂直滚动，改为X则是水平滚动
opacity: [0, 1] }, mode: 'wheel, touch, nav:navBar', easing: 'ease'}); 效果： http://denon-7c931.coding.io/fullpage.html 1.2 css3动画：修改js就行var runPrunPage = 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'}); 效果： http://denon-7c931.coding.io/fulldh.html 1.3 自动滚动，js修改如下var runPage, interval, autoP autoPlay = function(to) {
clearTimeout(interval);
interval = setTimeout(function() {
runPage.go(to);
}, 1000); } runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
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); 效果： http://denon-7c931.coding.io/fullauto.html 2、配置如图
原文： /1452.html
无相关信息jQuery全屏滚动插件fullPage.js
如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（），QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
jQuery 兼容
兼容 jQuery 1.7+。
浏览器兼容
1、引入文件
&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&
&div id="dowebok"&
&div class="section"&
&h3&第一屏&/h3&
&div class="section"&
&h3&第二屏&/h3&
&div class="section"&
&h3&第三屏&/h3&
&div class="section"&
&h3&第四屏&/h3&
每个 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 class="section"&第四屏&/div&
3、JavaScript
$(function(){
$('#dowebok').fullpage();
verticalCentered
内容是否垂直居中
字体是否随着窗口缩放而缩放
slidesColor
设置背景颜色
定义锚链接
scrollingSpeed
滚动速度，单位为毫秒
easeInQuart
滚动动画方式
绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation
是否显示项目导航
navigationPosition
项目导航的位置，可选 left 或 right
navigationColor
项目导航的颜色
navigationTooltips
项目导航的 tip
slidesNavigation
是否显示左右滑块的项目导航
slidesNavPosition
左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor
左右滑块的箭头的背景颜色
loopBottom
滚动到最底部后是否滚回顶部
滚动到最顶部后是否滚底部
loopHorizontal
左右滑块是否循环滑动
autoScrolling
是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow
内容超过满屏后是否显示滚动条
是否使用 CSS3 transforms 滚动
paddingTop
与顶部的距离
paddingBottom
与底部距离
fixedElements
normalScrollElements
keyboardScrolling
是否使用键盘方向键导航
touchSensitivity
continuousVertical
是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor
normalScrollElementTouchThreshold
moveSectionUp()
moveSectionDown()
moveTo(section, slide)
moveSlideRight()
slide 向右滚动
moveSlideLeft()
slide 向左滚动
setAutoScrolling()
设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling()
添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()
添加或删除键盘方向键控制
setScrollingSpeed()
定义以毫秒为单位的滚动速度
3、回调函数
滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；
nextIndex 是滚动到的“页面”的序号，从1开始计算；
direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender
页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad
滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave
某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数
fullPage.js GitHub 地址：
& CopyRight用JS替换网页CSS样式表皮肤效果的代码
推荐等级：
源码来源：网络收集与整理
源码人气：
编码语言：GBK/简体中文
授权方式：免费版
发布时间：
官方网站：
源码演示：
友情提示：事先准备多个CSS
用JS实现替换网页中CSS样式表皮肤的功能，要实现准备好多套CSS，然后通过实践触发JS代码来替换之，原理和做法都很简单，适合新手拿来直接用。
源码下载地址
其他JS源码：