fullpage插件基本应用

最终效果:

介绍:

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>

模块解释:

class是section的板块是一页,class是slide的板块是一张幻灯片

常用配置项:

1.激活fullpage

$('#fullpage').fullpage({

});

2.sectionColor:为每一个section设置背景色,

3.anchors:定义锚链接,默认值为[]。有了锚链接,用户就可以快速打开定位到某一页面。

4.loopTop:滚动到最顶部后是否连续滚动到底部,默认为false。

5.loopBottom:滚动到最底部后是否连续滚动回顶部,默认为false。

6.fixedElements:设置固定元素,如底部和顶部导航等。

7.recordHistory:是否记录历史,默认为true。

8.menu:绑定菜单。

9.navigation:是否显示导航,默认为false,设置为true,会显示小圆点。

10.navigationPosition:导航小圆点的位置,left或right。

11.navigationTooltips:小圆点的文字提示设置。

常用方法:

1.moveSectionU():向上滚动一页

2.moveSectionDown(): 向下滚动一页

3.moveTo(section,slide):滚动到某页某个幻灯片

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值