fullPage 全屏滚动 学习笔记
1.引入 cdn 文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<title>title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
</body>更多版本选择
2. 页面结构
<div id="myid">
<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>3. 初始化全屏
$(document).ready(function () {
$('#myid').fullpage();
})4. 配置API
$(document).ready(function () {
$('#myid').fullpage({
/*
fullpage 配置
*/
sectionsColor: ['#333', '#255261', '#986542', 'orange'],
// 为每一个section 设置 背景色
controlArrows: false,
// 定义是否通过箭头控制 slide 切换
verticalCentered: true,
// 每一页内容是否垂直居中
scrollingSpeed: 700,
// 页面滚动速度
anchors: ['page1', 'page2', 'page3', 'page4'],
// 定义锚链接，便于快速定位打开某一页面，需要与section 一一对应
lockAnchor: false,
// 锁定 锚链接，使地址栏不改变
// easing: 'easeInOutQuart',
// 定义页面 section 滚动的 动画方式，如果需要修改 要引入 jquery.easings 或者 jquery ui
css3: true,
// 是否使用 css3 transform 实现滚动效果，可以提高支持css3的浏览器的性能
loopTop: false,
// loopTop loopBottom loopHorizontal
// 滚动到最 顶部 | 底部 后是否连续滚动回起始点 | 横向 slider 是否循环滚动
autoScrolling: true,
// 是否使用插件的滚动方式，如果选false ，则会出现浏览器自带滚动条，默认行为滚动，不按页滚动
scrollBar: false,
// 是否显示滚动条，显示的话也是按页滚动
paddingTop: '100px',
// paddingTop|paddingBottom
// 设置每一section顶部和底部的padding，默认为0，可协助设置固定在顶部或者底部的菜单、导航
fixedElements: '#header',
// 设置固定，不随着页面切换滚动的元素，可以设置导航等，#header需要自己设置样式，而且必须加这个属性，否则不显示元素
keyboardScrolling: true,
// 是否可以使用键盘方向键导航
touchSensitivity: 10,
// 移动设备中滑动页面的敏感性，最大100 越大越难滑动
continuousVertical: true,
// 是否循环滚动， 与loopTop等不兼容
animateAnchor: true,
// 定位到锚链接是否会有滚动动画
recordHistory: true,
// 是否记录历史，默认为 true, 可以记录页面滚动历史，通过浏览器前进后退导航 需要autoScrolling = true
menu: '#fullpageMenu',
// 值是jquery 选择器，
// <ul id="fullpageMenu"><li data-menuanchor="page4"><a href="#page4">4 section</a></li></ul>
navigation: true,
// 是否显示导航， true 会显示小圆点
navigationPosition: 'right',
// 导航小圆点的位置 'left' 'right'
navigationTooltips: ['page1', 'page2', 'page3', 'page4'],
// 设置提示, 对应 anchor
showActiveTooltip: true,
// 是否显示当前页面导航的tooltip信息，滑动到某一页面自动在 小圆点处显示提示
slidesNavigation: true,
// 是否显示横向轮播的导航
slidesNavPosition: 'bottom',
// 横向轮播的导航位置 bottom top
scrollOverflow: true,
// 内容满屏后是否显示滚动条，设置为 true 会显示滚动条，查看内容需要 jquery.slimscroll插件配合
sectionSelector: '.section',
// section 的选择器，默认 .section
slideSelector: '.slide',
// slide 的选择器，默认 .slide
/*
fullpage 回调函数
*/
afterLoad(anchorLink, index) {
// 页面滚动结束后触发
console.log('锚链接名称：', anchorLink);
console.log('序号 从一开始：', index);
},
onLeave(index, nextIndex, direction) {
// 离开某一个 section 时触发
console.log('离开页面的序号：', index);
console.log('滚动到的目标：', nextIndex);
console.log('滚动的方向：', direction);
return true;
// return false 取消滚动
},
afterRender() {
// 页面结构生成后的回调
},
afterResize() {
// 浏览器窗口尺寸改变后回调
},
afterSlideLoad(anchorLink, index, slideAnchor, slideIndex) {
// 滚动到 某一个 slide 的回调
console.log('锚链接名称：', anchorLink);
console.log('页面序号 从一开始：', index);
console.log('slide 名称：', slideAnchor);
console.log('slide 序号：', slideIndex);
},
onSlideLeave(anchorLink, index, slideIndex, direction, nextSlideIndex) {
// 离开一个 slide 触发
console.log('锚链接名称：', anchorLink);
console.log('页面序号 从一开始：', index);
console.log('slide 序号：', slideIndex);
console.log('滚动的方向：', direction);
console.log('下一个 slide 序号：', nextSlideIndex);
return true;
// return false 取消滚动
}
});
// fullpage 提供的方法
$('.xxx').click(() => {
$.fn.fullpage.moveSectionUp();
// 向上滚动
$.fn.fullpage.moveSectionDown();
// 向下滚动
$.fn.fullpage.moveTo(3,2);
// 滚动到指定页，第一个参数是 section id 从 1 开始 第二个参数是 slide 从 0 开始
$.fn.fullpage.silentMoveTo(3,2);
// 跟 moveTo 一样 但是没有动画效果
$.fn.fullpage.moveSlideRight();
// slide 向右滚动
$.fn.fullpage.moveSlideLeft();
// slide 向左滚动
$.fn.fullpage.setAllowScrolling(true, 'down');
// 添加或删除鼠标滚轮滑动控制，第一参数，表示启用|禁用，后边的参数数组为方向 all|up|down|left|right，可以使用多个用‘，’隔开
$.fn.fullpage.setAutoScrolling(true);
// 动态设置 插件的滚动方式
$.fn.fullpage.setScrollingSpeed(1000);
// 动态设置 页面滚动速度
$.fn.fullpage.setLockAnchors(true);
// 动态设置 锁定 锚链接
$.fn.fullpage.setRecordHistory(true);
// 动态设置 是否记录历史
$.fn.fullpage.destory();
// 销毁 fullpage 特效，没有参数只是没有了特效，如果加入参数 'all' 表示全部销毁 fullpage 内容包括样式
$.fn.fullpage.reBuild();
// 重新更新页面效果， 用于 ajax 改变页面结构后重建
})
})
5.延迟加载图片
配置图片的src为 data-src 即可，同理可用于音频视频上
<img data-src="image.png" alt="延迟图片">
4983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
