MyException - 我的异常网
当前位置:我的异常网» JavaScript » 全屏滚动插件fullPage.js课程详解

全屏滚动插件fullPage.js课程详解

www.MyException.Cn  网友分享于:2013-03-09  浏览:0次
全屏滚动插件fullPage.js教程详解

【前言】

     经常看到一些全屏网站,看着就很高端大气上档次

     现在很多的网站用那种大的图片做背景什么的看起来效果很棒,可以用鼠标滚动条,然后就可以一层一层的往下面翻阅板块,并且带有过渡的动画,如果有导航可以点击导航到相应的板块。传统方法是用a标签的描点写的导航以及对应的相应板块,对于初学者一般也没什么高大上的方法,但是用a标签那只是一下子就到对应的板块去,完全没有过渡的样子,这样看起不太舒服。虽然用js可以弄但是有点麻烦,所以找到了fullPage.js方法。

   想实际操作的话,可以试着使用fullpage.js或 Scrollify 等基于jquery的插件,轻量又很方便

 

【兼容】

   jquery支持jquery 1.7+,浏览器支持IE8+及其他主流浏览器

 

【对比】

   对比Scrollify 和 fullPage.js:

   Scrollify 和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件。跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB。但功能上不如 fullPage.js 强大,对移动设备的支持也不如 fullPage.js。不过对于一般的情况,Scrollify 是完全可以胜任的,它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动

 

【下载】

    fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js

 

【功能】

  ①支持鼠标滚动

  ②支持前进后退和键盘控制

  ③多个回调函数

  ④支持手机、平板触摸事件

  ⑤支持 CSS3 动画

  ⑥支持窗口缩放

  ⑦窗口缩放时自动调整

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

 

【用法详解】

(1)文件引入

 ①引入css(注意:引入的css并非给元素设置样式的,元素的样式须要自己写)

    引入的css也就是个库,不是给我们设置css。简单来说就像bootstrap的库用class类这样使用

<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">

 ②引入fullPage.js之前,由于fullPage.js是开源的jQuery的所以需要先引入jQuery库

<script src="js/jquery.min.js"></script>

 ③引入脚本文件

<script src="js/jquery.fullPage.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

 

 (2)建立页面结构

<div id="main_body">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">第三屏</div>
  <div class="section">第四屏</div>
  <div class="section">第五屏</div>
</div>
  分析:

    ①每一个section都是一个页面,包裹住所有的页面的容器不能是body,可以任意命名一个id包裹住所有的section;

   ②section是一个代码一屏,默认代码是从第一屏开始的。如果要定义从第几屏开始的话的话就加active,这样就是从那个屏开始了;

   ③样式设置:两种方法CSS设置或者JS动态设置

    1. 引入的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>

    2. JS动态设置(还有许多其他配置项,比如给多个页面填充不同的背景颜色)

    激活fullPage效果

$(document).ready(function(){
        $('#main_body').fullpage({
            sectionsColor: ['red', 'blue', 'yellow', 'green','purple']
        });   //激活fullpage的效果,可以检查页面看效果了
})

 

(3)子滚动屏

   如果要在某屏中再加入子滚动屏,需要借助slide类,改动上述第二个section例如以下:

<div class="section section2" style="text-align: center">
        <div class="slide">第二屏的第一屏</div>
        <div class="slide">第二屏的第二屏</div>
        <div class="slide">第二屏的第三屏</div>
        <div class="slide">第二屏的第四屏</div>
</div>

 

(4)背景屏,CSS设置即可

.section1 { background: url(image/1.jpg) no-repeat 100%;}
.section2 { background: url(image/2.jpg) no-repeat 100%;}

   

(5)循环演示

   ①返回跳跃性循环

loopTop:true,             /* 顶部循环滚动是跳往底部的页面*/
loopBottom:true,           /*  底部循环滚动,同样是跳往页面*/
loopHorizontal:false,      /*  幻灯片循环滚动*/

   ②无间隙循环

continuousVertical:true,

    区别:第一种在页面滑动到最后一页时,在进行滑动的时候,会跳回第一页,是跳跃的,而第二种在页面滑动到最后一页的时候再次滑动会滑回第一页。注意,两种循环方式不能兼而有之 (实际上两种循环方式都使用的话,会显示第一种)

 

 

(6)导航栏

    做全屏滚动网页,实现滚动效果后,首先想到的就是网页右边的导航栏,要实现这个导航栏,fullpage.js插件本身就自带配置项,只要会使用就可以实现效果了

    先介绍几个api:

   ①anchors:定义锚链接,默认值为[],有了锚链接,就可以快速的打开定位到某一页面,也是我们实现导航栏的关键;

   ②lockAnchors:是否锁定锚链接,默认为false,如果设定为true,定义的锚链接,也就是anchors属性就没有效果了;

   ③menu:绑定菜单,设定相关属性与anchors的值相对应后,菜单可以控制滚动,默认为false;

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

   ⑤navigationPostion:导航小圆点的位置,可以设置为left或right;

   ⑥navigationTooltips:导航小圆点的tooltips的提示,默认为[],注意按照顺序设置

   【使用fullpage.js插件默认自带的导航栏:

<script>
  $(function(){
    $('#main_body').fullpage({
      anchors : ['section1','section2','section3'],//定义锚链接
      navigation:true,//是否显示--true为圆点,false则不显示
            continuousVertical: true,  //循环演示
      navigationPostion:right,//导航位置,left或right
      navigationTooltips:['1的提示','2的提示','3的提示']  //设置导航提示
       });
  });
</script>

  【自定义导航栏】

    倘若不想用fullpage.js默认的样式效果,还可以自定义样式

HTML:
<div id="gufeibai">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">第三屏</div>
</div>
<ul id="menu">
      <li data-menuanchors='page1'><a href="#page1">1屏幕</a></li>
      <li data-menuanchors='page2'><a href="#page2">2屏幕</a></li>
      <li data-menuanchors='page3'><a href="#page3">3屏幕</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;}
$(function() {
            $("#ido").fullpage({
                    continuousVertical: true,  //循环演示
                        //绑定菜单
                         anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
                    menu: '#menu',

             });
});

 

自定义Section高度

      网上很多用户说无法自定义底部Footer的高度,我也查阅了很多资料,都没有发现方法,但是无意间看到一个Fullpage的示例,实现自定义底部高度的方法,而且是不算在滑动的Section里面,在需要自定义高度的DIV里面,只需要给Section添加.fp-auto-height类就可以实现自定义高度。

 

 

【拓展】

(1)随意的改变其中一屏的高度

       如果设计别处心裁,最后一屏幕内容装不下,再添加一屏又多余,就是怎么能随意的改变其中一屏的高度,其实很简单,只需要在fullpage方法中添加一个参数:scrollOverflow: true即可。当然不要忘记引入一个 

<script src="https://cdn.bootcss.com/fullPage.js/2.9.5/vendors/scrolloverflow.min.js">
</script> 

      这样就不用担心内容超出一屏的内容无法显示了。可以在任意一屏随意的溢出并能准确衔接下一屏幕的内容了

(2)内容溢出scrollOverflow:true设置失效问题

      可能原因:(1)js版本不同导致的(2)scrollOverflow单词拼写错误

(3)自定义的导航菜单active添加不上,激活状态失效

      原因:(1)单词拼写错误data-menuanchor写成了data-menuanchors,多了个s

(4)js版本不一样的问题

      当jquery.fullpage.css和jquery.fullpage.js和scrolloverflow.min.js这三个版本一致的时候,我试了几个jq版本也没有出现问题,所以,版本要相同指的是jquery.fullpage.css ,scrolloverflow.min.js, jquery.fullpage.js这几个js相同

(5)最后附上部分API

//配置背景颜色
            sectionsColor:['red','#f04','#9b0','#d3f'],  

            //配置幻灯片切换是否显示箭头,默认true
            controlArrows:false, 

            //配置每页内容页面是否垂直居中,默认false
            verticalCentered:true,

            //配置文字是否随着窗口变化而变化,默认false
            resize:true,

            //配置页面滚动速度,默认700
            scrollingSpeed:1000,

            //配置锚链接,不应该和autoScrolling,scrollBar一起使用
            anchors:['page1','page2','page3','page4'],

            //配置锚点切换时候是否有过度动画,默认true
            animateAnchor:false,

            //锁定配置的锚链接是否显示,默认false
            lokAnchors:true,

            //配置动画由css3还是jquery来执行,默认true
            css3:true,

            //配置滚动到顶部之后是否从底部循环滚动,默认false
            loopTop:true,

            //相反从底部循环滚动,默认false
            loopBottom:true,

            //设置页面是否循环滚动与loopTop,loopBottom不兼容,默认是false
            continuousVertical:true,

            //幻灯片是否循环滚动,默认true
            loopHorizontal:false,

            //配置是否按照插件的方式来进行滚动,默认true,和锚点不应该一起使用,
            一般不设置或者保持默认
            autoScrolling:true,

            //滚动的时候是否包含滚动条,默认false,和锚点不应该一起使用,一般不设
            置或者保持默认
            scrollBar:false,

            //配置页面上下间距,默认0,如果需要设置固定顶部和顶部菜单导航配合使用
            // paddingTop:'300px',
            paddingBottom:0,

            //配置页面是否有固定的DOM
            fixedElements:'#header',

            //配置是否支持键盘方向键控制页面切换,默认true
            keyboardScrolling:true,

            //配置是否激活浏览器前进后退功能,如果页面设置了不按照插件的方式来滚动
              该配置也失效,默认true
            recordHistory:true,

            //配置菜单
            menu:'#fullpageMenu',

            //配置导航,位置,提示,显示当前位置
            navigation:true,
            navigation:'right',
            navigationTooltips:['page1','page2','page3','page4'],
            showActiveTooltip:true,

            //配置幻灯片是否显示导航,和位置
            slidesNavigation:true,
            slidesNavPosition:'bottom',

            //配置内容超过容器是否显示滚动条,模式true,
            scrollOverflow:true,

            //修改section和幻灯片默认CLASS
            sctionSelector:
            slideSelector:

 

 

 

 

 

 

 

.

文章评论

一个程序员的时间管理
一个程序员的时间管理
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
老程序员的下场
老程序员的下场
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员和编码员之间的区别
程序员和编码员之间的区别
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
总结2014中国互联网十大段子
总结2014中国互联网十大段子
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
每天工作4小时的程序员
每天工作4小时的程序员
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
漫画:程序员的工作
漫画:程序员的工作
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
程序员必看的十大电影
程序员必看的十大电影
中美印日四国程序员比较
中美印日四国程序员比较
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
10个调试和排错的小建议
10个调试和排错的小建议
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
编程语言是女人
编程语言是女人
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
如何成为一名黑客
如何成为一名黑客
Java程序员必看电影
Java程序员必看电影
代码女神横空出世
代码女神横空出世
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
我的丈夫是个程序员
我的丈夫是个程序员
那些争议最大的编程观点
那些争议最大的编程观点
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有