fullPage.js 全屏滚动插件

如今大家平常能看来看全屏网站,非常是海外玩站。那几个网站用几幅相当的大的图纸或色块做背景,再增加一些大约的剧情,显得特别的高级大气上档案的次序。而JQuery的一款插件fullpage.js,能够兑现全屏滚动,非常的火的效率,包容性IE8+包容性不错,能够包容两种浏览器。

全屏滚动插件fullPage.js使用实例深入分析,fullpage.js实例

今昔我们平时能看来看全屏网址,特别是国外玩站。那一个网址用几幅相当大的图纸或色块做背景,再增加一些简便的从头到尾的经过,显得非常的高等大气上等级次序。而JQuery的一款插件fullpage.js,可以兑现全屏滚动,相当流行的成效,包容性IE8+包容性不错,能够包容各类浏览器。

驷不比舌功能有:

支撑鼠标滚动

支持发展后退和键盘调整

多少个会调函数

辅助手提式有线电话机、平板触摸事件

支持CSS3动画

支持窗口缩放

窗口缩放时自动调解

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐格局等等

早为之所专业(下载jquery.fullPage.js和jquery.fullPage.css插件)

网站:插件下载地址()

图片 1

代码的外联式援用(包涵jquery-2.1.0.js)一共3个

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/> 
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/jquery.fullPage.js" type="text/javascript" charset="utf-8"></script> 

HTML脚本

<ul id="fullpageMenu"><!--ul导航栏按钮data-menuanchor为加载的页面page--> 
      <li data-menuanchor = "page1" class="active"><a href="#page1">section1</a></li> 
      <li data-menuanchor = "page2"><a href="#page2">section2</a></li> 
      <li data-menuanchor = "page3"><a href="#page3">section3</a></li> 
      <li data-menuanchor = "page4"><a href="#page4">section4</a></li> 
    </ul> 
    <div id="fullpage"><!--div为容器,这里要用id名为fullpage--> 
      <div class="section"><!--默认的上下滚动页面,类名可改sectionSelector:".section",不改默认类名要为section--> 
        <h1>这是第一屏</h1> 
      </div> 
      <div class="section"> 
        <div class="slide">幻灯片1</div><!--默认的左右滚动幻灯片,类名可改slideSelector:".slide",不改默认类名要为slide--> 
        <div class="slide">幻灯片2</div> 
        <div class="slide">幻灯片3</div> 
        <div class="slide">幻灯片4</div> 
      </div> 
      <div class="section"> 
        <h1>这是第三屏</h1> 
      </div> 
      <div class="section"> 
        <h1>这是第四屏</h1> 
      </div> 
    </div> 

CSS布局

<style type="text/css"> 
    *{ 
      margin: 0; 
      padding: 0; 
    } 
      .slide{ 
        font-size: 60px; 
        text-align: center; 
      } 
      #fullpageMenu{ 
        font-size: 30px; 
        position: fixed; 
        top: 0; 
        z-index: 1; 
        list-style: none; 
      } 
      #fullpageMenu li a{ 
        text-decoration: none; 
      } 
      #fullpageMenu li{ 
        background-color: mediumaquamarine; 
        border: 1px solid black; 
        padding: 8px; 
        cursor: pointer; 
        text-align: center; 
      } 
      #fullpageMenu li:hover{ 
        background-color: orange; 
      } 
    </style> 

jQuery脚本(首要用fullPage.js对页面进行参数配置)

<script type="text/javascript"> 
  $(document).ready(function(){ 
    //配置项 
    $("#fullpage").fullpage({ 
      //可以为每一个section设置background-color属性 
      sectionsColor:["green","orange","gray","red"], 

      //定义是否通过箭头来控制slide幻灯片,默认为true。当我们设置为false,则幻灯片左右两则的箭头就会消失,在移动设备上,我们可以通过滑动来操作幻灯片 
      controlArrows:true, 

      //每一页的内容是否垂直居中,默认为true.一般保持默认值 
      verticalCentered:true, 

      //滚动速度,单位为毫秒,默认为700 
      scrollingSpeed:1000, 

      //定义锚连接,默认为[]。有了锚链接,用户就可以快速打开定位到某一页面 
      //注意定义锚链接的时候,值不要和页面中任意的id或name相同,尤其是在IE浏览器下。而且定义时不需要要加# 
      anchors:["page1","page2","page3","page4"], 

      //是否锁定锚链接,默认为false。如果设置为true,那么定义的锚链接,也就是anchors属性则没有效果。这个配置项使用的比较少 
      lockAnchors:false, 

      //定义页面section滚动的动画方式,如果修改此项,需要引入jquery.easings插件,或者jquery ui 
      easing:"easeInOutCubic", 

      //是否使用CSS3 transforms 来实现滚动效果,默认为true。这个配置项可以提高支持css3的浏览器,比如移动设备等的速度,如果浏览器不支持css3,则会使用jquery来替代css3实现滚动效果 
      css3:true, 

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

      //滚动到最底部是否连续滚动回顶部,默认为false 
      loopBottom:false, 

      //横向slider幻灯片是否循环滚动,默认为true 
      loopHorizontal:true, 

      //是否使用插件的滚动方式,默认为true,如果选择false,则会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认行为来滚动 
      autoScrolling:true, 

      //是否包含滚动条,默认为false,如果设置为true,则浏览器自带的滚动条出现,页面滚动时还是按页滚动,但是滚动条的默认行为也有效 
      scrollBar:false, 

      //设置每一个section顶部和底部的padding,默认为0,一般如果需要设置一个固定顶部或者底部的菜单、导航、元素等,可以使用这两个配置项 
      paddingTop:0, 
      paddingBottom:0, 

      //固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素固定不动 
      fixedElements:"", 

      //是否可以使用键盘方向键导航,默认为true 
      keyboardScrolling:true, 

      //在移动设备中滑动页面的敏感性,默认为5,是按百分比来衡量,最高为100,越大则越难滑动 
      touchSensitivity:5, 

      //是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和这两者不兼容,请不要同时使用 
      continuousVertical:false, 

      //锚链接是否可以控制滚动动画,默认为true。如果设置为false,则通过锚链接定位到某个页面显示不再有动画效果 
      animateAnchor:true, 

      //是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。注意如果设置了autoScrolling:false,那么这个配置也将被关闭,即设置为false 
      recordHistory:true, 

      //绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery选择器 
      menu:false, 

      //是否显示导航,默认为false。如果设置为true,会显示小圆点,作为导航 
      navigation:true, 

      //导航小圆点的位置,可以设置为left或者right 
      navigationPosition:"right", 

      //导航小圆点的tooltips设置,默认为[],注意按照顺序设置 
      navigationTooltips:["page1","page2","page3","page4"], 

      //是否显示当前页面的导航的tooltip信息,默认为false 
      showActiveTooltip:true, 

      //是否显示横向幻灯片的导航,默认为false 
      slidesNavigation:true, 

      //横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom 
      slidesNavPosition:"top", 

      //内容超过满屏后是否显示滚动条,默认为false。如果设置为true,则会显示滚动条,如果滚动查看内容,还需要jquery.slimscroll插件的配合 
      scrollOverflow:false, 

      //section的选择器,默认为.section 
      sectionSelector:".section", 

      //slideSelector:slide的选择器,默认为.slide 
      slideSelector:".slide", 
    }); 
  }) 
</script> 

还会有点fullPage里的格局函数(可调用,这里自身没调用)

//方法函数 
        $.fn.fullpage.xxx()//调用方法 
        $.fn.fullpage.moveSectionUp();//向上滚动一页 
        $.fn.fullpage.moveSectionDown();//向下滚动一页 
        $.fn.fullpage.moveTo(section,slide);//滚动到第几页,第几个幻灯片,注意,页面是从1开始,而幻灯片是从0开始 
        $.fn.fullpage.silentMoveTo(section,slide);//滚动到第几页,第几个幻灯片和moveTo一样,但是没有动画效果 
        $.fn.fullpage.moveSlideRight();//幻灯片向右滚动 
        $.fn.fullpage.moveSlideLeft();//幻灯片向左滚动 
        $.fn.fullpage.setAutoScrolling(Boolean);//动态设置autoScrolling 
        $.fn.fullpage.setLockAnchors(Boolean);//动态设置lockAnchors 
        $.fn.fullpage.setRecordHistory(Boolean);//动态设置recordHistory 
        $.fn.fullpage.setScrollingSpeed(milliseconds);//动态设置scrollingSpeed 
        $.fn.fullpage.destroy(type);//销毁fullpage特效,type可以不写,或者使用all,不写type,fullpage给页面添加的样式和html元素还在如果使用all,则样式、html等全部销毁,页面恢复和不使用fullpage相同的效果 
        $.fn.fullpage.reBuild();//重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果 

亲自去做效果:

图片 2

以上正是本文的全部内容,希望对我们的学习抱有协助,也意在大家多多协理帮客之家。

近年来我们平常能看来看全屏网址,尤其是外国玩站。这个网址用几幅不小的图纸或色块…

  • 配备项部分介绍

fullPage.js和fullPage都能兑现全屏滚动,二者差距是:fullPage.js需依靠于JQuery库,而fullPage不须求依赖不论什么八个js库。能够独立使用。

fullPage 是一款不借助于任何 js 库的全屏滚动组件,援救垂直/水平滚动、CSS3
旋转/缩放动画,援救 IE5.5+,扶助活动装备。

重在职能有:

一、fullPage.js完成全屏

在线实例

笔直滚动

水平滚动

CSS3
动画1

CSS3
动画2

CSS3
动画3

过分效果

回调函数

活动滚动

支撑鼠标滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏滚动</title>
    <style>
        .section {
            text-align: center;
        }
        .section1 {
            background-color: #ccc;
        }
        .section2 {
            background-color: #058;
        }
        .section3 {
            background-color: lightblue;
        }
        .section4 {
            background-color: blue;
        }
        #header {
            position: fixed; /*要固定定位才行*/ 
            top: 0;
            right: 200px;
            background-color: red;
        }
        #fullPageMenu {
            position: fixed;
            top: 20px;
            left: 10px;
            color: #000;
            /*background-color: #000;*/
            z-index: 10;
        }
        #fullPageMenu li {
            color: #000;
        }
    </style>
    <link rel="stylesheet" href="./jquery.fullpage.css">
    <script src="./jquery.js"></script>
    <script src="./jquery.fullpage.js"></script>
</head>
<body>
<!-- 关于配置项menu -->
<ul id="fullPageMenu">
    <li data-menuanchor="page1"><a href="#page1">section1</a></li>
    <li data-menuanchor="page2"><a href="#page2">section2</a></li>
    <li data-menuanchor="page3"><a href="#page3">section3</a></li>
    <li data-menuanchor="page4"><a href="#page4">section4</a></li>
</ul>
    <div id="header">head</div>
    <div id="fullpage">
        <div class="section section1">Some section1</div>
        <div class="section section2">
            <div class="slide" data-anchor="slide1">slide1</div>
            <div class="slide" data-anchor="slide2">slide2</div>
            <div class="slide" data-anchor="slide3">slide3</div>
            <div class="slide" data-anchor="slide4">slide4</div>
        </div>
        <div class="section section3">Some section</div>
        <div class="section section4">Some section</div>
    </div>
    <script>
        $(document).ready(function() {
            var options = {
                //Navigation
                menu: '#fullPageMenu',//绑定菜单,设定相关属性与anchors值对应后,菜单可以控制滚动
                lockAnchors: false, // 开启锚点
                anchors:['page1', 'page2','page3','page4'],//锚点名称
                navigation: true,// 开启主页面导航,右侧
                navigationPosition: 'left',// 导航方位,只有右侧、左侧
                navigationTooltips: ['firstSlide', 'secondSlide','aaa','bbb'],// 导航放上去的tips
                showActiveTooltip: true,// 当翻到当前页时是否显示tooltips
                slidesNavigation: true, // 子导航是否显示
                slidesNavPosition: 'bottom',// 子导航显示方位 只有top、bottom两个选项
                //Scrolling
                css3: true,
                scrollingSpeed: 700, // 翻页速度
                autoScrolling: true,// 是否按插件本身方式滚动,false,会出现浏览器滚动条,而且不按页滚动
                fitToSection: false,
                fitToSectionDelay: 1000,
                scrollBar: false, // 是否显现滚动条,按页滚动和浏览器自带滚动都有效
                easing: 'easeInOutCubic',// 要引入jquery.easings插件
                easingcss3: 'ease',
                loopBottom: true,// 滚动到最底部是否连续滚动回顶部
                loopTop: true,// 滚动到最顶部是否连续滚动回底部
                loopHorizontal: true,// 横向slider幻灯片是否循环滚动
                continuousVertical: false,// 是否循环滚动,与loopBottom,loopTop不要同时设置
                continuousHorizontal: false,
                scrollHorizontally: false,
                interlockedSlides: false,
                resetSliders: false,
                fadingEffect: false,
                normalScrollElements: '#element1, .element2',
                scrollOverflow: false,//内容超过满屏后是否显示滚动条,可用jquery.slimscroll插件模拟滚动条
                scrollOverflowOptions: null,
                touchSensitivity: 15,// 移动设备中滑动页面的敏感性,越大越难滑动
                normalScrollElementTouchThreshold: 5,
                bigSectionsDestination: null,
                //Accessibility
                keyboardScrolling: true,// 是否可以用方向键导航
                animateAnchor: true,// 锚链接是否可以控制滚动动画
                recordHistory: true,//是否可以通过浏览器前进后退来记录历史,如果设置autoScrolling:false,此配置将被关闭

                //Design
                controlArrows: true,// 箭头是否显示
                verticalCentered: true,//文本是否垂直居中
                sectionsColor : ['#ccc', '#fff'],// 每一屏背景颜色
                paddingTop: '3em',// 每个section顶部和底部padding
                paddingBottom: '10px',// 如果需要顶部或底部菜单,那就可以改动这个值
                fixedElements: '#header, .footer',//固定元素,需要配置jquery选择器,页面滚动时固定不动
                responsiveWidth: 0,
                responsiveHeight: 0,
                responsiveSlides: false,

                //Custom selectors
                sectionSelector: '.section',//选择器类名
                slideSelector: '.slide',

                //events
                onLeave: function(index, nextIndex, direction){},
                afterLoad: function(anchorLink, index){},
                afterRender: function(){},
                afterResize: function(){},
                afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
                onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
            };

            $('#fullpage').fullpage(options);
        });
    </script>
</body>
</html>

    
fullPage.js是开源的JQuery插件库,其Github地址:

使用办法

  1. <div id=”pageContain”> 
  2.     <div class=”page page1 current”> 
  3.         <div class=”contain”> 
  4.             <p class=”txt”>第一屏</p> 
  5.         </div> 
  6.     </div> 
  7.  
  8.     <div class=”page page2″> 
  9.         <div class=”contain”> 
  10.             <p class=”txt”>第二屏</p> 
  11.         </div> 
  12.     </div> 
  13.    …… 
  14. </div> 
  15.  
  16. <ul id=”navBar”> 
  17.     <li>1</li> 
  18.     <li>2</li> 
  19.     ……. 
  20. </ul>

复制

  1. var runPage; 
  2. runPage = new FullPage({ 
  3.     id: ‘pageContain’, 
  4.     slideTime: 800, 
  5.     effect: { 
  6.         transform: { 
  7.             translate: ‘Y’ 
  8.         }, 
  9.         opacity: [0, 1] 
  10.     }, 
  11.     mode: ‘wheel, touch, nav:navBar’, 
  12.     easing: ‘ease’ 
  13. });

复制

支撑提升后退和键盘调整

    1、基本演示

参数详解

参数 描述 默认值
id 外层包裹 id
slideTime 每页切换时间,单位为毫秒 800
effect 切换效果
mode 转换模式
callback 滑动结束后的回调函数
prev() 向上滚动一页/一屏
next() 向下滚动一页/一屏
thisPage() 返回当前的页码
go(num) 滚动到第 num 页

下载

 

多个会调函数

           1.1  引入文件

协理手提式有线电话机、平板触摸事件

<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" />
<!-- fullpage.js依赖于jquery库 -->
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.min.js"></script>

支持CSS3动画

           1.2 
css:引入的css并不是给成分设置样式的。成分的样式需求本身写

支撑窗口缩放

<style type="text/css">
        body
        {
            color: #FFFFFF;
        }
        .section1
        {
            background-color: #BFDA00;
        }
        .section2
        {
            background-color: #2EBE21;
        }
        .section3
        {
            background-color: #2C3E50;
        }
        .section4
        {
            background-color: #FF9900;
        }
    </style>

窗口缩放时自动调度

          1.3 
html:每种section代码一屏,默许从第一屏显示,若需要自身定义从某屏開始突显,为section到场active类。演示样例私下认可从第三屏显示

可安装滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

<div id="ido">
    <div class="section section1">
        <h1>每个section是一屏,这是第一屏</h3>
    </div>
    <div class="section section2">
        <h1>每个section是一屏,这是第二屏</h3>
    </div>
    <div class="section section3 active">
        <h1>每个section是一屏。这是第三屏</h3>
    </div>
    <div class="section section4">
        <h1>每个section是一屏。这是第四屏</h3>
    </div>
</div>

安不忘虞干活(下载jquery.fullPage.js和jquery.fullPage.css插件)

        1.4  js:

网站:插件下载地址()

<script type="text/javascript">
    $(function() {
        $("#ido").fullpage();
    });
</script>

图片 3

   
效果:

代码的外联式援用(包括jquery-2.1.0.js)一共3个

        1.5 
能够在某屏中再投入子滚动屏,借助slide类。改造上述第4个section譬如以下:

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/> 
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> 
<script src="js/jquery.fullPage.js" type="text/javascript" charset="utf-8"></script> 
<div class="section section2" style="text-align:center">
            <h1 class="slide">第二屏的第一屏</h1>
            <h1 class="slide">第二屏的第二屏</h1>
            <h1 class="slide">第二屏的第三屏</h1>
            <h1 class="slide">第二屏的第四屏</h1>
</div>

HTML脚本

    
效果:

<ul id="fullpageMenu"><!--ul导航栏按钮data-menuanchor为加载的页面page--> 
      <li data-menuanchor = "page1" class="active"><a href="#page1">section1</a></li> 
      <li data-menuanchor = "page2"><a href="#page2">section2</a></li> 
      <li data-menuanchor = "page3"><a href="#page3">section3</a></li> 
      <li data-menuanchor = "page4"><a href="#page4">section4</a></li> 
    </ul> 
    <div id="fullpage"><!--div为容器,这里要用id名为fullpage--> 
      <div class="section"><!--默认的上下滚动页面,类名可改sectionSelector:".section",不改默认类名要为section--> 
        <h1>这是第一屏</h1> 
      </div> 
      <div class="section"> 
        <div class="slide">幻灯片1</div><!--默认的左右滚动幻灯片,类名可改slideSelector:".slide",不改默认类名要为slide--> 
        <div class="slide">幻灯片2</div> 
        <div class="slide">幻灯片3</div> 
        <div class="slide">幻灯片4</div> 
      </div> 
      <div class="section"> 
        <h1>这是第三屏</h1> 
      </div> 
      <div class="section"> 
        <h1>这是第四屏</h1> 
      </div> 
    </div> 

        1.6 
参与背景屏,在html参预三个section

CSS布局

<div class="section section5">
    <h1>每个section是一屏,这是第5屏--图片背景</h3>
</div>
<div class="section section6">
    <h1>每个section是一屏,这是第6屏--图片背景</h3>
</div>
<style type="text/css"> 
    *{ 
      margin: 0; 
      padding: 0; 
    } 
      .slide{ 
        font-size: 60px; 
        text-align: center; 
      } 
      #fullpageMenu{ 
        font-size: 30px; 
        position: fixed; 
        top: 0; 
        z-index: 1; 
        list-style: none; 
      } 
      #fullpageMenu li a{ 
        text-decoration: none; 
      } 
      #fullpageMenu li{ 
        background-color: mediumaquamarine; 
        border: 1px solid black; 
        padding: 8px; 
        cursor: pointer; 
        text-align: center; 
      } 
      #fullpageMenu li:hover{ 
        background-color: orange; 
      } 
    </style> 

 
         加入css

jQuery脚本(重要用fullPage.js对页面进行参数配置)

.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;}
.section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;}
<script type="text/javascript"> 
  $(document).ready(function(){ 
    //配置项 
    $("#fullpage").fullpage({ 
      //可以为每一个section设置background-color属性 
      sectionsColor:["green","orange","gray","red"], 

      //定义是否通过箭头来控制slide幻灯片,默认为true。当我们设置为false,则幻灯片左右两则的箭头就会消失,在移动设备上,我们可以通过滑动来操作幻灯片 
      controlArrows:true, 

      //每一页的内容是否垂直居中,默认为true.一般保持默认值 
      verticalCentered:true, 

      //滚动速度,单位为毫秒,默认为700 
      scrollingSpeed:1000, 

      //定义锚连接,默认为[]。有了锚链接,用户就可以快速打开定位到某一页面 
      //注意定义锚链接的时候,值不要和页面中任意的id或name相同,尤其是在IE浏览器下。而且定义时不需要要加# 
      anchors:["page1","page2","page3","page4"], 

      //是否锁定锚链接,默认为false。如果设置为true,那么定义的锚链接,也就是anchors属性则没有效果。这个配置项使用的比较少 
      lockAnchors:false, 

      //定义页面section滚动的动画方式,如果修改此项,需要引入jquery.easings插件,或者jquery ui 
      easing:"easeInOutCubic", 

      //是否使用CSS3 transforms 来实现滚动效果,默认为true。这个配置项可以提高支持css3的浏览器,比如移动设备等的速度,如果浏览器不支持css3,则会使用jquery来替代css3实现滚动效果 
      css3:true, 

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

      //滚动到最底部是否连续滚动回顶部,默认为false 
      loopBottom:false, 

      //横向slider幻灯片是否循环滚动,默认为true 
      loopHorizontal:true, 

      //是否使用插件的滚动方式,默认为true,如果选择false,则会出现浏览器自带的滚动条,将不会按页滚动,而是按照滚动条的默认行为来滚动 
      autoScrolling:true, 

      //是否包含滚动条,默认为false,如果设置为true,则浏览器自带的滚动条出现,页面滚动时还是按页滚动,但是滚动条的默认行为也有效 
      scrollBar:false, 

      //设置每一个section顶部和底部的padding,默认为0,一般如果需要设置一个固定顶部或者底部的菜单、导航、元素等,可以使用这两个配置项 
      paddingTop:0, 
      paddingBottom:0, 

      //固定的元素,默认为null,需要配置一个jquery选择器。在页面滚动的时候,fixedElements设置的元素固定不动 
      fixedElements:"", 

      //是否可以使用键盘方向键导航,默认为true 
      keyboardScrolling:true, 

      //在移动设备中滑动页面的敏感性,默认为5,是按百分比来衡量,最高为100,越大则越难滑动 
      touchSensitivity:5, 

      //是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和这两者不兼容,请不要同时使用 
      continuousVertical:false, 

      //锚链接是否可以控制滚动动画,默认为true。如果设置为false,则通过锚链接定位到某个页面显示不再有动画效果 
      animateAnchor:true, 

      //是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。注意如果设置了autoScrolling:false,那么这个配置也将被关闭,即设置为false 
      recordHistory:true, 

      //绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery选择器 
      menu:false, 

      //是否显示导航,默认为false。如果设置为true,会显示小圆点,作为导航 
      navigation:true, 

      //导航小圆点的位置,可以设置为left或者right 
      navigationPosition:"right", 

      //导航小圆点的tooltips设置,默认为[],注意按照顺序设置 
      navigationTooltips:["page1","page2","page3","page4"], 

      //是否显示当前页面的导航的tooltip信息,默认为false 
      showActiveTooltip:true, 

      //是否显示横向幻灯片的导航,默认为false 
      slidesNavigation:true, 

      //横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom 
      slidesNavPosition:"top", 

      //内容超过满屏后是否显示滚动条,默认为false。如果设置为true,则会显示滚动条,如果滚动查看内容,还需要jquery.slimscroll插件的配合 
      scrollOverflow:false, 

      //section的选择器,默认为.section 
      sectionSelector:".section", 

      //slideSelector:slide的选择器,默认为.slide 
      slideSelector:".slide", 
    }); 
  }) 
</script> 

       
效果: 
(滚动到5和6屏)

还会有点fullPage里的章程函数(可调用,这里小编没调用)

       

//方法函数 
        $.fn.fullpage.xxx()//调用方法 
        $.fn.fullpage.moveSectionUp();//向上滚动一页 
        $.fn.fullpage.moveSectionDown();//向下滚动一页 
        $.fn.fullpage.moveTo(section,slide);//滚动到第几页,第几个幻灯片,注意,页面是从1开始,而幻灯片是从0开始 
        $.fn.fullpage.silentMoveTo(section,slide);//滚动到第几页,第几个幻灯片和moveTo一样,但是没有动画效果 
        $.fn.fullpage.moveSlideRight();//幻灯片向右滚动 
        $.fn.fullpage.moveSlideLeft();//幻灯片向左滚动 
        $.fn.fullpage.setAutoScrolling(Boolean);//动态设置autoScrolling 
        $.fn.fullpage.setLockAnchors(Boolean);//动态设置lockAnchors 
        $.fn.fullpage.setRecordHistory(Boolean);//动态设置recordHistory 
        $.fn.fullpage.setScrollingSpeed(milliseconds);//动态设置scrollingSpeed 
        $.fn.fullpage.destroy(type);//销毁fullpage特效,type可以不写,或者使用all,不写type,fullpage给页面添加的样式和html元素还在如果使用all,则样式、html等全部销毁,页面恢复和不使用fullpage相同的效果 
        $.fn.fullpage.reBuild();//重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果 

        1.7 
循环演示:continuousVertical设置为true

示范效果:

$(function() {
    $("#ido").fullpage(
        {
            continuousVertical: true
        });
});

图片 4

     
效果: (滚动到第6屏。再向下滚动时自个儿主动再次来到第一屏)

以上正是本文的全体内容,希望对大家的上学抱有支持,也期望我们多多协助脚本之家。

        1.8 绑定菜单:加入菜单项

您也许感兴趣的稿子:

  • 原生javascript完结的全屏滚动作效果应示例
  • JavaScript全屏和退出全屏事件下结论(附代码)
  • fullPage.js和CSS3兑现全屏滚动作效果应
  • 原生js实现类似fullpage的单页/全屏滚动
  • Javascript
    完毕全屏滚动实例代码
  • JS实现全屏的多种写法
  • jQuery插件fullPage.js完成全屏滚动作效果应
  • JS
    全屏和退出全屏详解及实例代码
  • 浅谈javascript调整HTML5的全屏操控,浏览器包容的问题
  • js实现各浏览器全屏代码实例
<ul id="menu">
    <li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
    <li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
    <li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
    <li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
    <li data-menuanchor="page5"><a href="#page5">第5屏</a></li>
    <li data-menuanchor="page6"><a href="#page6">第6屏</a></li>
</ul>

       加入css

#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}

       改动js

$(function() {
            $("#ido").fullpage(
                {
                    continuousVertical: true,  //循环演示
                        //绑定菜单
                         anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
                    menu: '#menu',

                });
        });

      
效果:

         1.9  导航演示:设置’navigation’:
true,

$(function() {
            $("#ido").fullpage(
                {
                    continuousVertical: true,  //循环演示
                    //绑定菜单
                    anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
                    menu: '#menu',

                    // 导航
                    'navigation': true,
                });
        });

        
效果: (导航在右側)

  

    2、配置如图

图片 5

假设供给配置easing和scrollOverflow,则必须引入额外的js(在vendors文件夹下)

<!-- jquery.easings.min.js 用于 easing 參数,也能够使用完整的 jQuery UI 取代。假设不须要设置 easing 參数,可去掉改文件 -->
<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.easings.min.js"></script>
<!-- 假设 scrollOverflow 设置为 true。则须要引入 jquery.slimscroll.min.js。普通情况下不须要 -->
<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.slimscroll.min.js"></script>

 

二、fullPage实现全屏

     fullPage 是一款不信赖不论什么 js
库的全屏滚动组件,辅助垂直/水平滚动、CSS3 旋转/缩放动画,辅助IE5.5+。援助活动器具。其Github地址:

    1、基本演示

<!-- 引入js -->
<script type="text/javascript" src="./fullpage-master/js/fullPage.min.js"></script>

       1.1  垂直滚动

                 css

body {
      width: 100%;
          *cursor: default;
      overflow: hidden;
      font: 16px/1.5 "Microsoft YaHei";
  }
  div,p {
      margin: 0;
      padding: 0;
  }
  ul {
          list-style: none;
  }
  #pageContain {
      overflow: hidden;
  }
  .page {
      display: none;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
  }
  .contain {
      width: 100%;
      height: 100%;
      display: none;
      position: relative;
      z-index: 0;
  }
  .current .contain,.slide .contain {
      display: block;
  }
  .current {
      display: block;
      z-index: 1;
  }
  .slide {
      display: block;
      z-index: 2;
  }
  .page1 {
      background: #37c1e3;
  }
  .page2 {
      background: #009922;
  }
  .page3 {
      background: #992211;
  }
  .page4 {
      background: #ff00ff;
  }
  .page5 {
      background: #00ff00;
  }
  .page6 {
      background: #22ffff;
  }
  #navBar {
      z-index: 3;
      position: absolute;
      top: 10%;
      right: 3%;
  }
  #navBar .active {
      background: #ccc;
  }
  #navBar li {
      cursor: pointer;
      margin-bottom: 10px;
      transition: all .7s ease;
      border-radius: 50%;
      line-height: 40px;
      text-align: center;
      width: 40px;
      height: 40px;
  }
h1
 {
     text-align: center;
     margin-top: 20%;
 }

   html

<div id="pageContain">
  <div class="page page1 current">
      <div class="contain">
          <h1 class="txt">第一屏</h1>
      </div>
  </div>

  <div class="page page2">
      <div class="contain">
          <h1 class="txt">第二屏</h1>
      </div>
  </div>

  <div class="page page3">
      <div class="contain">
          <h1 class="txt">第三屏</h1>
      </div>
  </div>

  <div class="page page4">
      <div class="contain">
          <h1 class="txt">第四屏</h1>
      </div>
  </div>

  <div class="page page5">
      <div class="contain">
          <h1 class="txt">第五屏</h1>
      </div>
  </div>
</div><ul id="navBar">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

js

var runPage;
runPage = new FullPage({
    id: 'pageContain',
    slideTime: 800,
    effect: {
        transform: {
            translate: 'Y'    //垂直滚动。改为X则是水平滚动
        },
        opacity: [0, 1]
    },
    mode: 'wheel, touch, nav:navBar',
    easing: 'ease'
});

 

效果:

 

   1.2  css3动画:改动js即可

var runPage;
runPage = new FullPage({
    id: 'pageContain',
    slideTime: 800,
    effect: {
        transform: {
           translate: 'X',
           scale: [0, 1],
    rotate: [270, 0]
        },
        opacity: [0, 1]
    },
    mode: 'wheel, touch, nav:navBar',
    easing: 'ease'
});

效果:

 

    1.3 
本人积极滚动,js退换举例以下

var runPage, interval, autoPlay;

    autoPlay = function(to) {
        clearTimeout(interval);
        interval = setTimeout(function() {
            runPage.go(to);
        }, 1000);
    }
    runPage = new FullPage({
        id: 'pageContain',
        slideTime: 800,
        effect: {
            transform: {
               translate: 'X',
               scale: [0, 1],
        rotate: [270, 0]
            },
            opacity: [0, 1]
        },
        mode: 'wheel, touch, nav:navBar',
        easing: 'ease',
        callback: function(index, thisPage){
        index = index + 1 > 3 ? 0 : index + 1;
        autoPlay(index);
         }
    });
    interval = setTimeout(function() {
            runPage.go(runPage.thisPage() + 1);
        }, 1000);

效果:

 

 

 

2、配置如图

图片 6

相关文章