fullPage是如今比较主流网页样式，特别是国外网站（简约大气）。它的主要设计模式是全屏设计，只需要添加少许主题内容与背景图片即可，就能很快的设计出一个高bg的网站。并且兼容性也很好，因为是基于jquery进行开发的
由于API之多我们主讲几个基本API,并且自主用jq去对它进行封装。
使用须知：
引入文件 >
- css样式文件
- jquery.js文件（因为基于jquery进行编写的）
- 开发者所写的js文件
两种引入方法
- 下载至本地引入
下载地址：https://n459.com/file/1603944-83301805（注意：下载可能会下载失败，肯能由于网络问题，无需删除重新载下，因为一小时只能下载一次，所以当下载失败时，点击继续。或另找网站下载）
记住引入时，jq的引入必须在fullPage.js之前
找到需要引入的三个关键文件（同本地）
我们先使用开发者所写的方法来一波操作，为后面我们自主用jq进行封装打个印象
原：
<!-- 引入文件 -->
<link rel="stylesheet" href="../fp-DL/css/jquery.fullPage.css">
<script src="../fp-DL/js/jquery-1.8.3.min.js"></script>
<script src="../fp-DL/js/jquery.fullPage.min.js"></script>
<!-- HTML -->
<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>
$(function () {
//初始话fullPage插件
$("#dowebok").fullpage(
{
//给dowebol ID元素下则子元素设置背景颜色
sectionsColor: ["#0ff", "f0f", "ff0", "#ccc"],
}
);
})
//这时它会上下切换,也可用键盘上下操作
当你再在section内设置些子元素时,如下
<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>
</div>
//这时slide子元素会左右切换,也可用键盘左右操作
/* 按F12检查审查元素时,你会发现slide类元素自动添加了了两个祖先类 */
当你左右切换时,fp-slidesContainer类元素是用转换属性stransform:translate3d来改变元素的x轴左右移动,而为fp-slidesContainer类元素添加fp-slides类元素的目的是为了让你的fp-slidesContainer类元素超出部分隐藏
自主封装fullpage（简略版）
主体结构
<body>
<!--容器-->
<div class="container">
<!--主屏-->
<div class="section">第一屏</div>
<div class="section">
<!--子屏-->
<div class="slide">第二屏-1</div>
<div class="slide">第二屏-2</div>
<div class="slide">第二屏-3</div>
</div>
<div class="section">第二屏</div>
</div>
</body>
/* 注意：因为是基于jquery进行封装，所以需要导入2一下的版本（兼容性较好） */
<!-- 必需放在自己mufullPage前 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="myfullPage"></script>
<script>
$('.container').myfullPage({
//主屏背景颜色
ccolorArray: ["#005574", "#093E20", "#617629"],
})
</script>
···详情封装
//实例方法
$.extend({
myfullPage: function (config) {
//将常用的元素，存放起来.
//这里的this是container类
var $C = $(this);
var $Section = $C.find('.section');
//可视区的宽高
var clientWidth = $(window).outerWidth(),
clientHeight = $(window).outerHeight();
//主屏背景颜色
var colorArray = config.colorArray;
//因为是全屏式的网页，所以将常用样式存放到变量中。
var cStyle = {
width: '100%',
height: '100%',
}
//页面样式初始化
//html与body为组内元素
$('html').add('body').css({
postion: 'relative',
overfolw: 'hidden',
margin: '0',
})
//html,body,$C,$Section为组内元素
.add($C)
.add($Section)
.css(cStyle);
//container类独有样式
$C.css({
postion: "absolute",
left: 0,
top: 0,
}).find('.section')//所有section样式
.each(function (index, ele) {//each循环
$(ele).css({
backgroundColor: colorArray[index],
// 也可以添加背景图（需要添加backgroundIamge:）
postion: 'relative'
}).find('.slide').css({//子屏样式
height: clientHeight,
widht: clientWidth,
}).warpAll($('<div class="slideContainer"></div>'));//在所有slide的父级上添加个slideContainer类的div元素
});
//slide子屏父类slideContainer类样式
$Section.find('.slideContainer').each(function (index, ele) {
$(ele).css({
display: 'flex',
width: $(ele).find('.slide').size() * clientWidth,
height: clientHeight,
postion: 'absolute',//通过left
top: 0,
left: 0,
});
});
// 第一个section添加上一个active样式，当前section下如果有slide 初始化第一个有innerActive样式名
$Section.eq(0)
.addClass('active')
.end() //prevObject，返回之前被删除的元素
.find('.sliderWrapper')
.each(function (index, ele) {
$(ele).find('.slide').eq(0).addClass('innerActive');
});
//键盘事件绑定
//从第一个主屏元素开始
var curIndex = 0;
//开关，防止来回上下切动过快出现叠加效果
var lock = true;
$(document).on('keydown', function (e) {
//e.which jq的事件对象中，获取键盘码
//当为上：38、下：40时
if (e.which == 38 || e.which == 40) {
//判断开关是否打开
if (lock) {
//进来，再将开关闭，避免上下多次按取，造成差错。（上个事件还没执行完，紧接执行下一个）
lock = false;
// 记录移动方向
var direction = null;
// 当前距离为顶部top
var newTop = $C.offset().top;
// 当为上并且不是第一个（当地一个就不能在向上移动）
if (e.which == 38 && curIndex != 0) {
direction = 'top';
newTop += clientHeight;
curIndex--;
// 当为侠并且不是最后一个
} else if (e.which == 40 && curIndex != ($Section.size() - 1)) {
direction = 'bottom';
newTop -= clientHeight;
curIndex++;
}
// container类移动动画
$C.animate({
top: newTop,
}, 300, 'swing', function () {
//回调函数，当执行完时，开关打开，可进行下次事件
lock = true;
// 动态添加active
$Section.eq(curIndex).addClass('active');
// 删除之前的active 官方用了一个参数 direction
if (direction == 'top') {
$Section.eq(curIndex + 1).removeClass('active');
} else if (direction == 'bottom') {
$Section.eq(curIndex - 1).removeClass('active');
}
});
}
}
//当为左：37、右：39
if (e.which == 37 || e.which == 39) {
// 左右移动，开关必须打开,并且主屏下必须有slideContainer类元素
if (lock && $(".active").find(".slideDowebok").size() > 0) {
lock = false;
// 水平移动
// 水平移动的父元素
var $SC = $('.active').find('.slideContainer');
// 移动之前，获取当前显示的dom元素
var curShowDom = $SC.find('.innerActive');
// 当前的左边的距离值
var newLeft = $SC.offset().left;
// 记录切换方向
var direction = null;
if (e.which == 37 && curShowDom.index() != 0) {
// left
direction = 'left';
newLeft += clientWidth;
} else if (e.which == 39 && curShowDom.index() != $SC.find('.slide').size() - 1) {
// right
direction = 'right';
newLeft -= clientWidth;
}
$SC.animate({
left: newLeft
}, 300, 'swing', function () {
lock = true;
//direction有值的情况下，才清楚curShowDom上的样式
direction != null ? curShowDom.removeClass('innerActive') : '';
if (direction == 'left') {
curShowDom.prev().addClass('innerActive');
} else if (direction == 'right') {
curShowDom.next().addClass('innerActive');
}
});
}
}
});
}
});
2271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
