fullPage.js全屏滚动插件

切图仔

发布于 2022-09-08 07:17:07

15.9K00

代码可运行

文章被收录于专栏：生如夏花绚烂生如夏花绚烂

运行总次数：0

代码可运行

如果你要制作一个全屏的网页，使用这个插件在合适不过，如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>