简介

　　　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. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  3. jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)

    1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...

  4. 仿小米网jQuery全屏滚动插件fullPage.js

    演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...

  5. 【转载】jQuery全屏滚动插件fullPage.js

    文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...

  6. jQuery 全屏滚动插件 fullPage.js 参数说明

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...

  7. jQuery全屏滚动插件fullPage.js

    github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...

  8. jQuery全屏滚动插件fullPage使用

    1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> &l ...

  9. 制作手机相册 全屏滚动插件fullpage.js

    今天是端午自己做了一个小的送祝福链接  这里用到了fullpage插件 $('#container').fullpage({ navigation: false,        //navigatio ...

随机推荐

  1. Atomic原子类

    Atomic原子类 Atomic原子类位于并发包java.util.concurrent下的java.util.concurrent.Atomic中. 1. 原子更新基本类型类 使用原子方式更新基本数 ...

  2. linux手动安装python

    前提:你的linux服务器必须有gcc编译器,gcc查看方法:linux命令行>gcc -v 如果返回版本信息证明已经安装, 如果找不到命令,跳到这篇手动安装gcc >>> l ...

  3. JavaScript学习系列博客_18_JavaScript中的匿名函数

    匿名函数 - 用函数声明的方式创建一个函数时,不加函数名称. function sum(){ console.log("我是函数sum")} - 不加名称,这样写浏览器是会报错的. ...

  4. 你还在认为 count(1) 比 count(*) 效率高？

    你还在认为 count(1) 比 count(*) 效率高? 3 很多人认为count(1)执行的效率会比count()高,原因是count()会存在全表扫描,而count(1)可以针对一个字段进行查 ...

  5. ceph 开启mgr balancer

    参考链接: mgr balancer模式探索及配置方法1 mgr balancer模式探索及配置方法2 1.ceph mgr module enable balancer [root@controll ...

  6. Deep and Beautiful. The Reward Prediction Error Hypothesis of Dopamine

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! Contents: Abstract 1. Introduction 2. Reward-Prediction Error Meets D ...

  7. 方差分析、T检验、卡方分析如何区分？

    差异研究的目的在于比较两组数据或多组数据之间的差异,通常包括以下几类分析方法,分别是方差分析.T检验和卡方检验. 三个方法的区别 其实核心的区别在于:数据类型不一样.如果是定类和定类,此时应该使用卡方 ...

  8. Shell编程—基础脚本

    1. 使用多个命令 如果要两个命令或者多个命令一起运行,可以把它们放在同一行中,彼此间用分号隔开. 2. 创建 shell 脚本文件 例如: #!/bin/bash # This script dis ...

  9. Java——注解

    注解的产生背景以前,xml以低耦合的方式得到了广大开发者的青睐,xml在当时基本上能完成框架中的所有配置.但是随着项目越来越庞大,xml的配置也越来越复杂,维护性也随之降低,维护成本增高.于是就产生了 ...

  10. IDEA的主题配置

    搞了半天的主题配色,从一些现有的主题网站上想找按照sublime中monokai进行复刻的主题,都没有找到一样的,部分的颜色还会让人看不清楚,这里分享一下自定义主题的方法,和自己配置好的一个主题吧. ...