fullPage.js全屏滚动插件
fullPage.js全屏滚动插件
如果你要制作一个全屏的网页，使用这个插件在合适不过，如QQ浏览器官方网站
使用方法
1.引入fullpage.css文件
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">2.引入jq 和 fullpage.js文件
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>3.初始化
//html
<div id="fullpage">
<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>
//js
$('#fullpage').fullpage({
navigation:true,//显示导航
navigationPosition:'right',
//导航显示右边
controlArrowColor:'red',//左右滑块背景颜色
});4.参数设置 传递对象形式
参数 | 说明 |
|---|---|
resize | (true/false)字体是否随着窗口缩放而缩放 |
slidesColor | 设置背景颜色 |
anchors | (array)定义锚链接 |
scrollingSpeed | （int） 设置滚动速度，单位为毫秒 |
easing | （striing）滚动动画方式 |
menu | (true/false) 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 |
navigation | (true/false)是否显示项目导航 |
navigationPosition | (string) 项目导航的位置，可选 left 或 right |
navigationColor | (string)项目导航的颜色 |
navigationTooltips | (array)项目导航的 tip |
slidesNavigation | (true/false) 是否显示左右滑块的项目导航 |
slidesNavPosition | (string)左右滑块的项目导航的位置，可选 top 或 bottom |
controlArrowColor | (string) 左右滑块的箭头的背景颜色 |
loopBottom | (true/false)滚动到最底部后是否滚回顶部 |
loopTop | (true/false)滚动到最顶部后是否滚底部 |
loopHorizontal | (true/false)左右滑块是否循环滑动 |
autoScrolling | (true/false) 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 |
scrollOverflow | (true/false)内容超过满屏后是否显示滚动条 |
css3 | (true/false) 是否使用 CSS3 transforms 滚动 |
paddingTop | string() 与顶部的距离 |
paddingBottom | string() 与底部距离 |
keyboardScrolling | (true/false) 是否使用键盘方向键导航 |
continuousVertical | (true/false)是否循环滚动，与 loopTop 及 loopBottom 不兼容 |
5.常用方法 | |
-- | -- |
moveSectionUp() | 向上滚动 |
moveSectionDown() | 向下滚动 |
moveTo(section, slide) | 滚动到 |
moveSlideRight() | slide 向右滚动 |
moveSlideLeft() | slide 向左滚动 |
setAutoScrolling() | 设置页面滚动方式，设置为 true 时自动滚动 |
setAllowScrolling() | 添加或删除鼠标滚轮/触控板控制 |
setKeyboardScrolling() | 添加或删除键盘方向键控制 |
setScrollingSpeed() | 定义以毫秒为单位的滚动速度 |
6.回调函数 | |
-- | -- |
afterLoad () | 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 为序号，从1开始计算 |
onLeave() | 滚动前的回调函数，接收 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个参数 |
7.demo
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<style type="text/css">
*{
margin:0;
padding:0;
}
#fullpage .section{
width:100%;
height:400px;
background: skyblue;
margin:30px 0;
}
.section .slide{
width: 200px;
height:200px;
margin:0 auto;
border:1px solid red;
}
</style>
</head>
<body>
<div id="fullpage">
<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>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- <script type="text/javascript" src='../jquery.easing.1.3'></script> -->
<script src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript">
$(function(){
$('#fullpage').fullpage({
navigation:true,//显示导航
navigationPosition:'right',
//导航显示右边
controlArrowColor:'red',//左右滑块背景颜色
});
});
</script>
</body>
</html>腾讯云开发者
