码迷,mamicode.com
首页 > Web开发 > 详细

学习 | jQuery全屏滚动插件FullPage.js

时间:2018-03-04 16:34:55      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:1.4   nta   时间   href   direct   port   鼠标移动   utc   err   

  简介

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

  主要功能

  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式

    兼容性

    fullPage.js 支持 IE8+ 及其他现代浏览器。测试代码

   测试代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.css">
  <style>
    #myMenu{
      width: 900px;
      display: block;
      position: fixed;
      top: 20px;
      z-index: 999;
    }
    #myMenu li{
      float: left;
      list-style: none;
      margin-left: 20px;
      text-align: center;
    }
    #myMenu a {
      font-size: 24px;
      color: red;
    }
    #fullpage .section{
      font-size: 24px;
      color: red;
    }
    .section:nth-child(3) div{
      width: 200px;
      margin:0 auto;
    }
    .btn{
      position: fixed;
      top: 100px;
      z-index: 999;
    }
  </style>
</head>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="./jquery-ui.min.js"></script>
  <script src="./jquery.fullPage.js"></script>
  <script>
    $(document).ready(function(){
      $(#fullpage).fullpage({
        // 决定是否使用控制箭头向左向右移动幻灯片
         controlArrows:true,
         // 是否垂直居中网页中的内容
         verticalCentered:true,
         // 是否在窗口改变大小后,自动调整网页中字体的大小
         resize:true,
         // 每个屏幕滚动动画执行的时间
         scrollingSpeed:700,
         // 确定是否使用JavaScript和CSS3转换滚动在切片和幻灯片,如果为true则css3无效
         css3:true,
         // 定义在滚动屏幕中使用css3:true设置的过度效果,比如赛贝尔曲线
         easingcss3:ease,
         // 定义每个section的CSS背景演示
         sectionsColor: [#254875, #00FF00, #254587, #695684],
         // 定义导航的锚文本信息例如(#page1)
         anchors: [page1, page2, page3, page4],
         // 确定是否在URL中的锚点将在插件有任何影响
         lockAnchors:false,
         // 定义了用于垂直和水平滚动的过渡效果
         easing:easeInOutCubic,
         // 定义屏幕滚动到第一个后,是否循序滚动到最后一个
         loopTop:false,
         // 定义屏幕滚动到最后一个后,是否循环滚动到第一个。
         loopBottom:false,
         // 定义水平的幻灯片是否循环切换
         loopHorizontal:true,
         // 义屏幕是否自动滚动,还是需要用户触发事件滚动
         autoScrolling:true,
         // 设置是否自适应整个窗口的空间,当为true时section将填充到整个页面,否者用户可以停留在网页的任何位置。
         fitToSection:true,
         // 定义是否使用浏览器默认的滚动条
         scrollBar:false,
         // 定义是否使用浏览器默认的滚动条
         paddingTop:10px,
         // 显示一个小圆圈组成的快速导航栏
         navigation: true,
         // 结合参数navigation一起使用,用于设置navigation定义的菜单显示的位置,可以设置为left/right。
         navigationPosition: right,
         // 鼠标移动到快速导航上面的提示文本
         navigationTooltips: [fullPage.js, Powerful, Amazing, Simple],
         menu:#myMenu,
         // 回调函数
         // 1.滚动到某一屏后
         afterLoad:function(link,index){
           var currentSection =$(this);
           if(index===3){
             console.log(currentSection);
             console.log(is 3 section);
           }
           if(link===page2){
             console.log(is 2 section)
           }
         },
         // 滚动前
         // index 是离开的“页面”的序号,从1开始计算;
         // nextIndex 是滚动到的“页面”的序号,从1开始计算;
         // direction 判断往上滚动还是往下滚动,值是 up 或 down。
         onLeave:function(index,nextIndex,direction){
           var currentSection = $(this);
           // 离开第二个到了第三个
           if(index==2){
             console.log(currentSection);
             console.log(nextIndex);
             console.log(direction);
             console.log(到了第三个,上一个是第二个);
           }
           if(nextIndex==3){
             // return false 取消自动滚动
             console.log(1111);
             return false;
           }
            // 不常用的
            // afterRender()
            //   页面结构生成后的回调函数,或者说是页面初始化完成后的回调函数
            // afterResize()
            //   浏览器窗口尺寸改变后的回调函数
            // afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
            //   滚动到某一幻灯片后的回调函数,与afterLoad类似
            // onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
            //   在我们离开一个slide时,会触发一次此回调函数,与onLeave类似
         }
      })
      // 方法函数
      $(.btn).bind(click,function(){
        // 设置section向上滚动
        $.fn.fullpage.moveSectionUp();
        // 设置section向下滚动
        // $.fn.fullpage.moveSectionDown();
        // 指定section index从0开始
        // $.fn.fullpage.moveTo(3);
        // 定义每个section/slide滚动的时间
        // $.fn.fullpage.setScrollingSpeed(700);
        // 设置幻灯片向右滑动
        // $.fn.fullpage.moveSlideRight();
        // 设置幻灯片向左滑动
        // $.fn.fullpage.moveSlideLeft();
      })
    })


  </script>
<body>
  <ul id="myMenu">
    <li data-menuanchor="page1" class="active"><a href="#page1">First section</a></li>
    <li data-menuanchor="page2"><a href="#page2">Second section</a></li>
    <li data-menuanchor="page3"><a href="#page3">Third section</a></li>
    <li data-menuanchor="page4"><a href="#page4">Fourth section</a></li>
 </ul>
 <input type="button" style="color:#000;font-size:24px;" value=点击 class="btn">
  <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>
</body>

</html>

 

学习 | jQuery全屏滚动插件FullPage.js

标签:1.4   nta   时间   href   direct   port   鼠标移动   utc   err   

原文地址:https://www.cnblogs.com/dirkhe/p/8505009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!