JQuery插件Fullpage说明文档

详细说明文档：http://fullpage.81hu.com/
http://www.dowebok.com/demo/2014/77/

使用说明：

- 1.引入插件文件

    <link rel="stylesheet" type="text/css" href="css/myPage.css"><link rel="stylesheet" type="text/css" href="css/base.css"><link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"><script type="text/javascript" src="js/jquery.min.js"></script><!-- 自定义页面滚动的效果 --><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script type="text/javascript" src="js/jquery.fullPage.min.js"></script><script type="text/javascript" src="js/jquery-ui.min.js"></script><script type="text/javascript" src="js/myPage.js"></script>

<!--对于内容比较多的页面，可以设置右侧的滚动条，但是默认情况下无法滚动，你需要jquery.slimscroll.min.js文件来自定义滑条滚动效果 -->
<script type="text/javascript" src="/fullpage/jquery.slimscroll.min.js"></script>

最后，如果你不想下载到项目中，您可以使用开源项目CDN服务，Fullpage在CDNJS的地址：https://cdnjs.com/libraries/fullPage.js

2、编写HTML代码
默认情况下，每一屏幕的代码都需要有DIV包裹，并且设置DIV的类名为section，默认情况下，第一个setion将作为首页显示在页面上。

<div id="fullpage'">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>

假如你需要让某一个section作为首页的第一屏展示，你只需要给这个section添加一个active的类，Fullpage会自动优先展示这个屏幕，例如定义下面的代码：<div class="section active">Some section</div>
Fullpage自带左右滑动的幻灯片，只需要在section中添加DIV元素，并且给DIV元素添加slide类，FUllpage会自动生成幻灯片特效，例如下面的代码：

<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide"> Slide 2 </div>
<div class="slide"> Slide 3 </div>
<div class="slide"> Slide 4 </div>
</div>

3、初始化Fullpage
使用jQuery的文档加载完毕以后执行函数，初始化Fullpage插件。

$(document).ready(function() {$('#fullpage').fullpage();
});

所有的选项设置更复杂的初始化可能看起来像这样:

$(document).ready(function() {$('#fullpage').fullpage({//Navigationmenu: false,//绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。anchors:['firstPage', 'secondPage'],//anchors定义锚链接，默认为[]lockAnchors: false,//是否锁定锚链接，默认为false,设为true后链接地址不会改变navigation: false,//是否显示导航，默认为falsenavigationPosition: 'right',//导航小圆点的位置navigationTooltips: ['firstSlide', 'secondSlide'],//导航小圆点的提示showActiveTooltip: false,//是否显示当前页面的tooltip信息slidesNavigation: true,//是否显示横向幻灯片的导航，默认为falseslidesNavPosition: 'bottom',//横向导航的位置，默认为bottom，可以设置为top或bottom//Scrollingcss3: true,//是否使用CSS3 transforms来实现滚动效果，默认为truescrollingSpeed: 700,//设置滚动速度，单位毫秒，默认700autoScrolling: true,//是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条fitToSection: true,//设置是否自适应整个窗口的空间，默认值：truescrollBar: false,//是否包含滚动条，默认为false,若为true浏览器自带滚动条出现easing: 'easeInOutCubic',//定义页面section滚动的动画方式，若修改此项需引入jquery.easing插件easingcss3: 'ease',//定义页面section滚动的过渡效果，若修改此项需引入第三方插件loopBottom: false,//滚动到最低部后是否连续滚动到顶部，默认为falseloopTop: false,//滚动到最顶部后是否连续滚动到底部，默认为falseloopHorizontal: true,//横向slide幻灯片是否循环滚动，默认为truecontinuousVertical: false,//是否循环滚动，不兼容loopTop和loopBottom选项normalScrollElements: '#element1, .element2',//避免自动滚动，滚动时的一些元素，例如百度地图scrollOverflow: false,//内容超过满屏后是否显示滚动条，true则显示滚动条，若需滚动查看内容还需要jquery.slimscroll插件的配合touchSensitivity: 15,//在移动设备中滑动页面的敏感性，默认为5最高100，越大越难滑动normalScrollElementTouchThreshold: 5,//AccessibilitykeyboardScrolling: true,//是否可以使用键盘方向键导航，默认为trueanimateAnchor: true,//锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效recordHistory: true,//是否记录历史，默认为true,浏览器的前进后退可导航。若autoScrolling:false,那么这个属性将被关闭//DesigncontrolArrows: true,//定义是否通过箭头来控制slide,默认trueverticalCentered: true,//定义每一页的内容是否垂直居中，默认trueresize : false,//字体是否随窗口缩放而缩放，默认falsesectionsColor : ['#ccc', '#fff'],//为每个section设置background-color属性paddingTop: '3em',设置每一个section顶部的padding,默认为0paddingBottom: '10px',设置每一个section底部的padding,默认为0fixedElements: '#header, .footer',固定元素，默认为null,需要配置一个jquery选择器，在页面滚动时，fixElements设置的元素不滚动responsiveWidth: 0,responsiveHeight: 0,//Custom selectorssectionSelector: '.section',//section选择器。默认为.sectionslideSelector: '.slide',//slide选择器，默认为.slide//eventsonLeave: 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){}});
});

JQuery插件Fullpage说明文档相关推荐

html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...
fullcalendar显示出勤日_FullCalendar 日历插件中文说明文档
普通显示设置属性描述默认值 header 设置日历头部信息. 如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置: t ...
sublime插件配置说明文档
clone地址: git clone git://github.com/bxcn/sublime_plugins_config.git 安装Sublime Package Control 安装步骤第 ...
jquery插件 ajaxForm文档
表单插件API 表单插件API提供了几种方法,可以让您轻松管理表单数据和表单提交. ajaxForm 通过添加所有必要的事件侦听器来准备要通过AJAX提交的表单.它并没有提交表单.使用ajaxForm ...
单屏（全屏）适配解决方案（jQuery插件）
文章目录背景案例分析案例总结插件原理插件实现说明文档 Introduction Application.js Configuration Examples 总结背景在平时的web开发过 ...
FullCalendar 二：FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
bootstrap3 文件上传插件fileinput中文说明文档
file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官 ...
Sep 15 FullCalendar日历插件说明文档
Sep 15 FullCalendar日历插件说明文档 helloweba.com 作者:月光光时间:2013-09-15 13:53 标签: FullCalendar 日历文档 FullCa ...
jQuery.i18n.properties 中文说明文档
jQuery.i18n.properties 版本 : 1.2.2 关于 jQuery.i18n.properties是一个轻量级的jQuery插件,用于从.properties文件中提供javasc ...
jquery.zSlide.js-基于CSS3/HTML5演示文档jQuery插件
一.卖的什么葫芦药? jquery.zSlide.js是我最近折腾的一个jQuery插件,借助于CSS3和HTML5的一些新特性,在浏览器中实现类似于powerpoint幻灯片展示. 如果你看到这段文 ...

JQuery插件Fullpage说明文档

使用说明：

JQuery插件Fullpage说明文档相关推荐

最新文章

热门文章