fullpage插件基本应用

原创

小羽向前跑 2023-01-03 15:03:00 ©著作权

文章标签 ide ajax jquery 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者小羽向前跑的原创作品，请联系作者获取转载授权，否则将追究法律责任

最终效果：

介绍：

fullpage.js是一个基于jQuery的插件，它能够很方便、很轻松的制作出全屏网站。

主要功能：支持鼠标滚动、多个回调函数、支持手机、平板触摸事件、支持css3动画、支持窗口缩放、窗口缩放自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

使用准备：

引入fullpage的css样式：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css">

引入fullpage的js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>

引入jQuery：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>fullpage</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css">
    <style>
        .slide{
            text-align: center;
        }
        #header{
            position: fixed;
            top: 0;
            left: 50%;
            color: white;
        }
        #fullpageMenu{
            position: fixed;
            top:0;
            z-index: 999;
        }
        #fullpageMenu a{
            color: white;
        }
    </style>
</head>
<body>
<ul id="fullpageMenu">
    <li data-menuanchor="page1" class="active"><a href="#page1">1 section</a></li>
    <li data-menuanchor="page2"><a href="#page2">2 section</a></li>
    <li data-menuanchor="page3"><a href="#page3">3 section</a></li>
    <li data-menuanchor="page4"><a href="#page4">4 section</a></li>
</ul>
<div id="fullpage">
    <header id="header"><h2>header</h2></header>
    <!--类名active自动定位到某个页面-->
    <div class="section"><h1>这是第一屏</h1></div>
    <div class="section">
        <div class="slide">slide1</div>
        <div class="slide">slide2</div>
        <div class="slide">slide3</div>
        <div class="slide">slide4</div>
    </div>
    <div class="section"><h1>这是第三屏</h1></div>
    <div class="section"><h1>这是第四屏</h1></div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<script>
    //页面开始时激活fullpage
    $(document).ready(function () {
        $('#fullpage').fullpage({
            //section的背景色设置
            sectionsColor:['#282c34','#e4393b','yellowgreen','rebeccapurple'],
            // controlArrows:falsecontrolArrows:false
            //verticalCentered:false
            //页面滚动速度
            //scrollingSpeed:1500
            anchors:['page1','page2','page3','page4'],
            //loopTop:true,
            //页面滚动到底部是否回到第一屏
            loopBottom:true,
           // loopHorizontal:true
            fixedElements:"#header",
            menu:'#fullpageMenu',
            navigation:true,
            navigationPosition:'right',
            navigationTooltips:['page1','page2','page3','page4'],
            scrollOverflow:true,
            afterLoad:function (anchorLink,index) {
                console.log("afterLoad:anchorLink="+anchorLink
                +";index="+index
                );
            }
        });
    })
</script>