fullpage插件的使用

来源：互联网发布：网络推广都做些什么编辑：程序博客网时间：2024/04/30 10:52

1、引用文件

[html] view plaincopyprint?

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2、html部分

[html] view plaincopyprint?

<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>

3、使用方法

[javascript] view plaincopyprint?

$(document).ready(function() {
$.fn.fullpage({
slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
anchors: ['page1', 'page2', 'page3', 'page4']
});
});

4、详细options参数

参数类型说明默认值verticalCentered字符串内容是否垂直居中trueresize布尔值字体是否随着窗口缩放而缩放falseslidesColor函数设置背景颜色，如：无anchors数组定义锚链接无scrollingSpeed整数滚动速度，单位为毫秒700easing字符串滚动动画方式easeInQuartmenu布尔值绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动falsenavigation布尔值是否显示项目导航falsenavigationPosition字符串项目导航的位置，可选 left 或 rightrightnavigationColor字符串项目导航的颜色#000navigationTooltips数组项目导航的 tip无slidesNavigation布尔值是否显示左右滑块的项目导航falseslidesNavPosition字符串左右滑块的项目导航的位置，可选 top 或 bottombottomcontrolArrowColor字符串左右滑块的箭头的背景颜色#fffloopBottom布尔值滚动到最底部后是否滚回顶部falseloopTop布尔值滚动到最顶部后是否滚底部falseloopHorizontal布尔值左右滑块是否循环滑动trueautoScrolling布尔值是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条truescrollOverflow布尔值内容超过满屏后是否显示滚动条falsecss3布尔值是否使用 JavaScript 或 CSS3 transforms 滚动falsepaddingTop字符串与顶部的距离0paddingBottom字符串与底部距离0fixedElements字符串
无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个参数无

0 0