fullpage插件

fullpage插件的简单介绍：
一.简介：fullpage.js是一个基于jQuery的全屏滚动插件，它能够很方便&很轻松的制造出全屏网站
二.主要功能：
1.支持鼠标滚动
2.多个回调函数
3.支持手机&平板触摸事件
4.支持css3动画
5.窗口缩放时自动调整
6.可设置滚动宽度.背景颜色.斜体样式.滚动速度.循环选项.回调.文本对齐方式等
fullpage插件的下载使用：
下载地址：http://github.com/alvarotrigo/fullpage.js
使用方法;
1.引入文件
1.1fullpage自己的css库文件
1.2jQuery(版本1.6.0+)
1.3fullpage自己的js文件
1.4其他的扩展库（jQuery.easings.min.js等）

<div id="fullpage"><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><div class="section">这是第四屏</div></div>

使用方法：

  <script>$(function(){$("#fullpage").fullpage();})</script>

配置项：
sectionsColor：可以为每一个section设置背景色
controlArrows: 定义是否通过箭头来控制slide幻灯片，默认为true，当我们设置为false，
幻灯片两侧的箭头会消失，在移动设备上可以通过滑动来操作幻灯片
navigation: 是否显示导航，默认为false，如果设置成true，会显示小圆点，作为导航
navigationPosition: 导航小圆点的位置，可以设置为left或者right
navigationTooltips: 导航小圆点的tooltips设置，默认是[]，注意按照顺序设置
showActiveTooltip: 是否显示当前页面的导航的tooltip信息，默认为false；

      $.fn.fullpage.方法名方法moveSectionUp(): 向上滚动一页 moveSectionDown(): 向下滚动一页 moveTo（section，slide）: 滚动到第几页，第几个幻灯片，注意，页面是从1开始，而     幻灯片是从0开始计算silentMoveTo(section,slide) : 滚动到第几页，和moveTo一样，但是没有动画效果回调函数afterRender（）： 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数onLeave(index,nextIndex,direction) 在我们离开一个section时，会触发一次此回调函数，接收index，nextIndex和direction3个参数 index： 是离开的页面的序号，从 1 开始， nextIndex：是滚动到的目标页面的序号,从 1 开始 direction：判断向上滑动还是往下滑动，值是 up 或者 down

fullpage插件简介
很方便，很轻松制作全屏页面
fullpage插件下载使用
使用步骤
引入文件
页面骨架
fullpage方法
fullpage插件常用API
配置项、方法、回调函数

fullpage插件相关推荐

利用fullpage插件，快速开发整屏翻页的页面
我们经常看过一些整屏翻页的网站,看上去很高大上对于一些同学来说如果要原生的去开发可能还是有很大难度的.今天我给大家介绍Fullpage插件,也能达到这一个效果.下面我给同学们看下小米网站的这个页面:h ...
H5C3动画实例，通过基于jQuery的fullpage插件完成
要点: 1.素材是黑马程序员的,自己重写了下代码,主要是为了体会下h5c3. 2.环境 : 3.主要是加入了pullpage的插件特有的功能帮助开发,其中基于jQuery开发的插件,其定义的方法一般都 ...
html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...
JQuery插件制作具有动态效果的网页
JQuery插件制作具有动态效果的网页前言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和 ...
Fullpage参数说明
参数说明 $(document).ready(function() {$('#fullpage').fullpage({//Navigationmenu: false,//绑定菜单,设定的相关属性与a ...
fullpage实例
用fullpage插件做的一个实例网址(适用于移动端和pc端):www.new-mix.com.cn/
空气质量html模板,基于HTML5+CSS3移动端空气质量APP的设计与实现
摘要: 本文设计的空气质量APP是在Android系统上运行的.在"智慧城市"和"互联网+"的背景下,人们更加关注"健康"这个话题,日常出行 ...
页面加载时模块移入动画---wow
首先官网下载:https://github.com/matthieua/WOW animate.css wow.js 1,在头部引用animate.css <link rel="sty ...
支付宝年度账单交互效果的实现
作者:旺仔前几天,支付宝又为我们作了一项公益,那就是替我们算了2017年花了多少钱,剁了多少次手,当然,作为一位前端工作者来说,最吸引我的地方就是今年的支付宝年度账单比往年的在交互效果上 ...

fullpage插件

fullpage插件相关推荐

最新文章

热门文章