整屏滚动效果插件 fullpage详解

发布于:2014-09-16 11:28:22 - 查看:1432次

转自   插件fullpage参数详解

1、引用文件

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

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

  3. <script src="js/jquery-ui.min.js"></script>  

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


2、html部分

  1. <div class="div">第一屏</div>  

  2. <div class="div">第二屏</div>  

  3. <div class="div">  

  4.     <div class="slide">第三屏的第一屏</div>  

  5.     <div class="slide">第三屏的第二屏</div>  

  6.     <div class="slide">第三屏的第三屏</div>  

  7.     <div class="slide">第三屏的第四屏</div>  

  8. </div>  

  9. <div class="div">第四屏</div>  


3、使用方法

  1. $(document).ready(function() {  

  2.     $.fn.fullpage({  

  3.         slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],  

  4.         anchors: ['page1', 'page2', 'page3', 'page4']  

  5.     });  

  6. });  


4、详细options参数

参数                           类型                        说明                                           默认值

verticalCentered      字符串      内容是否垂直居中                                         true

resize                       布尔值      字体是否随着窗口缩放而缩放                        falses

lidesColor                 函数        设置背景颜色,如:                                       无

anchors                     数组        定义锚链接                                                    无

scrollingSpeed          整数        滚动速度,单位为毫秒                                  700

easing                      字符串      滚动动画方式                                               easeInQuart

menu                       布尔值      绑定菜单,设定的相关属性与 anchors           false

                                                的值对应后,菜单可以控制滚动

navigation               布尔值      是否显示项目导航                                          false

navigationPosition  字符串      项目导航的位置,可选 left 或 right                right

navigationColor      字符串      项目导航的颜色                                              #000

navigationTooltips   数组        项目导航的 tip                                                无

slidesNavigation     布尔值      是否显示左右滑块的项目导航                          falses

lidesNavPosition     字符串      左右滑块的项目导航的位置可选,

                                                top或bottom                                                 bottom

controlArrowColor 字符串     左右滑块的箭头的背景颜色                               #fff

loopBottom            布尔值     false

loopTop                  布尔值     滚动到最顶部后是否滚底部                              false

loopHorizontal       布尔值     左右滑块是否循环滑动                                      true

autoScrolling          布尔值     是否使用插件的滚动方式,如果选择 false,     true

                                               则会出现浏览器自带的滚动条 

scrollOverflow        布尔值     内容超过满屏后是否显示滚动条                       false

css3                        布尔值     是否使用JavaScript或CSS3 transforms 滚动   false

paddingTop           字符串     与顶部的距离0                                                  

paddingBottom     字符串     与底部距离0

fixedElements        字符串                                                                               无

normalScrollElements                                                                                     无

afterLoad                函数       滚动到某一屏后的回调函数,接收 anchorLink     无

                                             和 index 两个参数,anchorLink 是锚链接的名称

                                            ,index 是序号,从1开始计算无onLeave函数滚动

                                             前的回调函数,接收 index 和 direction 两个参数,

                                             index 是序号,从1开始计算,direction 判断往上

                                    滚动还是往下滚动

afterRender           函数        页面结构生成后的回调函数,或者说页面初始化完  无

                                             成后的回调函数无afterSlideLoad函数滚动到某一

                                             水平滑块后的回调函数,与 afterLoad 类似,接收 

                                             anchorLink、index、slideIndex、direction 4个参

                                             数

onSlideLeave         函数        某一水平滑块滚动前的回调函数,与 onLeave 类似  无

                                            ,接收 anchorLink、index、slideIndex、direction

                                             4个参数



github  项目地址 https://github.com/alvarotrigo/fullPage.js

demo地址:http://view.qq.web0310.com/fullpage/