• Jquary全屏滚动插件fullpage.js的使用

    1. fullpage.js的主要功能

    fullPage.js是一个基于jquery的插件，它能很方便的制作出全屏网站

     2.引包

    CDNJS地址: https://cdnjs.com/libraries/fullPage.js icon-default.png?t=M7J4https://links.jianshu.com/go?to=https%3A%2F%2Fcdnjs.com%2Flibraries%2FfullPage.js

     3.引入文件及文件依赖关系

    fullpage.js插件依赖： fullpage的 css文件， jQuery，如果设置了 options中 css3: false，如果你用除了 jQuery的默认 linear 和 swing缓动的效果之外的缓动效果的话，需要添加 jQuery UI library。

    引入依赖的文件，注意顺序！

    2. <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
    3. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">script>
    4.  
    6. <script src="vendors/jquery.easings.min.js">script>
    7.  
    9. <script type="text/javascript" src="jquery.fullPage.js">script>

    4.编写页面结构

    编写 html的页面结构，每个 section独占一屏幕，默认显示第一屏。

    2.   
      第一屏
    3.   
      第二屏
    4.   
      第三屏
    5.   
      第四屏

    •  如果需要从非第一屏开始显示，则需要给对应的section添加active样式类即可。

    <div class="section active">第三屏div>

    5.编写初始化的脚本

    1. $(function() {
    2.   $('#fullpage').fullpage();
    3. });

    fullpage中文文档

    fullPage.js/lang/chinese at master · alvarotrigo/fullPage.js · GitHubfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple - fullPage.js/lang/chinese at master · alvarotrigo/fullPage.jshttps://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs

    fullpage设置项

     

     

     

     案例1：延迟加载案例： 

    4.     
    5.

    案例2：设置不同屏的背景色 

    1. $('#fullpage').fullpage({
    2.     sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
    3. });

    fullpage的方法

     完整案例

    1.  <style>
    2.         * {
    3.             margin: 0;
    4.             padding: 0;
    5.         }
    6.  
    7.         ul {
    8.             list-style: none;
    9.         }
    10.  
    11.         a {
    12.             text-decoration: none;
    13.         }
    14.  
    15.         .nav {
    16.             position: fixed;
    17.             top: 0;
    18.             left: 0;
    19.             z-index: 99;
    20.             display: flex;
    21.             width: 100%;
    22.             height: 40px;
    23.             line-height: 40px;
    24.             background-color: rgba(0, 0, 0, .3);
    25.         }
    26.  
    27.         .nav li {
    28.             width: 150px;
    29.             text-align: center;
    30.         }
    31.  
    32.         .nav li.active {
    33.             background-color: #f00;
    34.         }
    35.     style>
    36. head>
    37.  
    38. <body>
    39.     <ul class="nav" id="nav">
    40.         <li class="active" data-menuanchor="first"><a href="#first">第1屏a>li>
    41.         <li data-menuanchor="second"><a href="#second">第2屏a>li>
    42.         <li data-menuanchor="third"><a href="#third">第3屏a>li>
    43.         <li data-menuanchor="fourth"><a href="#fourth">第4屏a>li>
    44.     ul>
    45.  
    46.     <div id="fullpage">
    47.         <div class="section">第一屏div>
    48.         <div class="section">第二屏div>
    49.         <div class="section">
    50.             <div class="slide">第三屏的第一屏div>
    51.             <div class="slide">第三屏的第二屏div>
    52.             <div class="slide">第三屏的第三屏div>
    53.             <div class="slide">第三屏的第四屏div>
    54.         div>
    55.         <div class="section">第四屏div>
    56.     div>
    57. body>
    59.  
    60. <script src="./js/jquery-1.8.3.min.js">script>
    61. <script src="./js/jquery.fullPage.min.js">script>
    62. <script>
    63.     $(function () {
    64.         $('#fullpage').fullpage({
    65.             // licenseKey: 'YOUR_KEY_HERE',//收费  需要有认证密钥
    66.             sectionsColor: ['pink', '#f2f2f2', "#eab", "#b6a"],//每一屏背景色
    67.             // navigation: true,//分页器是否显示 默认false
    68.             navigationPosition: "right",//分页器位置
    69.             navigationColor: "#ffffff",//分页器颜色
    70.             navigationTooltips: ["11", "22", "33", "44"],//项目导航的 tip
    71.             // slidesNavigation: true,//默认false 是否显示左右滑块的项目导航(轮播图的分页器)
    72.             slidesNavPosition: "top",//默认bottom 左右滑块的项目导航的位置，可选 top 或 bottom
    73.             controlArrowColor: "#00f",//左右滑块的箭头的背景颜色
    74.             loopHorizontal: false,//左右滑块是否循环滑动
    75.  
    76.             loopBottom: true,
    77.             loopTop: true,//滚动到最顶部后是否滚底部
    78.  
    79.             menu: "#nav",//绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
    80.             anchors: ["first", "second", "third", "fourth"],//定义锚链接
    81.         });
    82.     });
    83. script>

  • 相关阅读:
    Java:实现DoubleHashing双哈希测试算法（附完整源码）
    移动app测试的7个关键点，建议收藏
    计算机竞赛 深度学习乳腺癌分类
    dbeaver连接MySQL数据库及错误Connection refusedconnect处理
    vue3+elementPlus table滚动条样式覆盖
    centos7.6安装python3.8
    代码练习-字符串经典题目
    蓝桥等考Python组别十六级006
    Mysql--索引分类
    Fluent的msh格式网格学习
  • 原文地址：https://blog.csdn.net/m0_59642141/article/details/126728753