fullpage全屏滚动插件使用

最新推荐文章于 2024-08-08 08:32:23 发布

养乐多@

最新推荐文章于 2024-08-08 08:32:23 发布

阅读量175

点赞数

文章标签： javascript web app

本文链接：https://blog.csdn.net/weixin_45102016/article/details/113550649

版权

fullpage

1、引入

 <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.js"></script>
  <script src="./static/jquery.easing.js"></script>

2、html代码

<div id="fullpage">
        <div class="section">section1</div>
        <div class="section">section2</div>
        <div class="section">section3</div>
        <div class="section">section4</div>
</div>
每个section的div是一个单页

3、初始化

  $("#dowebok").fullpage({
   sectionsColor: [
        "#000000",
        "#4BBFC3",
        "#7BAABE",
        "#f90",
        "#1bbc9b",
        "#4BBFC3",
        "#7BAABE",
        "#f90",
        "#000000",
      ],
      scrollingSpeed: 800,
      verticalCentered: false,
      loopBottom: false,
      afterLoad: function (anchorLink, index) {
      }，
       onLeave: function (index, direction) {
       }
  }）