Fullpage.js全屏滚动jQuery插件
兼容性:
- 支持 IE8+ 及其他现代浏览器。
主要功能：
1.支持鼠标滚动；
2.支持前进后退键盘控制;
3.多个回调函数;
4.支持手机.移动设备;
5.支持窗口缩放自动调整;
6.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等;
7.支持CSS3动画;
实现方法：
1.插入jquery.fullPage.css;
2.插入jquery.js;
3.插入jquery-ui.js;(用于制作动画)
4.插入jquery.fullpage.js;
1 <link rel="stylesheet" href="jquery.fullPage.css">
2 <script src="jquery-1.11.3.min.js"></script>
3 <script src="jquery-ui.js"></script>
4 <script src="jquery.fullPage.js"></script>
HTML:
如果你想定义一个不同的出发点，而不是一段或一部分的第一个幻灯片，只需添加active section，并放在你想加载幻灯片位置前。
为了在一个幻灯片内进行扩展另外的横向幻灯片，每个幻灯片将定义一个div。
1 <body>
2 <div id="fullpage">
3 <div class="section s1">
4 <img src="img/bc8.jpg" alt="">
5 </div>
6 <div class="section s2">
7 <img src="img/bc8.jpg" alt="">
8 </div>
9 <div class="section s3">
10 <img src="img/bc8.jpg" alt="">
11 </div>
12 <div class="section s4">
13 <img src="img/bc8.jpg" alt="">
14 </div>
15 <div class="section s5">
16 <img src="img/bc8.jpg" alt="">
17 </div>
18 </div>
19 </body>
javaScript:
1 <script>
2 $(function(){
3 $('#fullpage').fullpage({
4 navigation:'true'
5 });
6 });
7 </script>
配置表:
1.选项
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| verticalCentered | 字符串 | true | 内容是否垂直居中 |
| resize | 布尔值 | false | 字体是否随着窗口缩放而缩放 |
| slidesColor | 函数 | 无 | 设置背景颜色 |
| anchors | 数组 | 无 | 定义锚链接 |
| scrollingSpeed | 整数 | 700 | 滚动速度，单位为毫秒 |
| easing | 字符串 | easeInQuart | 滚动动画方式 |
| menu | 布尔值 | false | 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 |
| navigation | 布尔值 | false | 是否显示项目导航 |
| navigationPosition | 字符串 | right | 项目导航的位置，可选 left 或 right |
| navigationColor | 字符串 | #000 | 项目导航的颜色 |
| navigationTooltips | 数组 | 空 | 项目导航的 tip |
| slidesNavigation | 布尔值 | false | 是否显示左右滑块的项目导航 |
| slidesNavPosition | 字符串 | bottom | 左右滑块的项目导航的位置，可选 top 或 bottom |
| controlArrowColor | 字符串 | #fff | 左右滑块的箭头的背景颜色 |
| loopBottom | 布尔值 | false | 滚动到最底部后是否滚回顶部 |
| loopTop | 布尔值 | false | 滚动到最顶部后是否滚底部 |
| loopHorizontal | 布尔值 | true | 左右滑块是否循环滑动 |
| autoScrolling | 布尔值 | true | 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 |
| scrollOverflow | 布尔值 | false | 内容超过满屏后是否显示滚动条 |
| css3 | 布尔值 | false | 是否使用 CSS3 transforms 滚动 |
| paddingTop | 字符串 | 0 | 与顶部的距离 |
| paddingBottom | 字符串 | 0 | 与底部距离 |
| fixedElements | 字符串 | 无 | |
| normalScrollElements | 无 | ||
| keyboardScrolling | 布尔值 | true | 是否使用键盘方向键导航 |
| touchSensitivity | 整数 | 5 | |
| continuousVertical | 布尔值 | false | 是否循环滚动，与 loopTop 及 loopBottom 不兼容 |
| animateAnchor | 布尔值 | true | |
| normalScrollElementTouchThreshold | 整数 | 5 |
2.方法：
- moveSectionUp() 向上滚动
- moveSectionDown() 向下滚动
- moveTo(section, slide) 滚动到
- moveSlideRight() slide 向右滚动
- moveSlideLeft() slide 向左滚动
- setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动
- setAllowScrolling() 添加或删除鼠标滚轮/触控板控制
- setKeyboardScrolling()添加或删除键盘方向键控制
- setScrollingSpeed() 定义以毫秒为单位的滚动速度
3、回调函数
| 名称 | 说明 |
|---|---|
| afterLoad | 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 |
| onLeave | 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；
nextIndex 是滚动到的“页面”的序号，从1开始计算； direction 判断往上滚动还是往下滚动，值是 up 或 down。 |
| afterRender | 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 |
| afterSlideLoad | 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数 |
| onSlideLeave | 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数 |
Fullpage.js全屏滚动jQuery插件的更多相关文章
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- jquery.fullPage.js全屏滚动插件
注:本文内容复制于http://www.51xuediannao.com/js/jquery/jquery.fullPage.html 和 http://www.360doc.com/content/ ...
- fullpage.js全屏滚动插件使用小结
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...
- FullPage.js全屏滚动插件学习总结
如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果 ...
- FullPage.js全屏滚动插件的配置项、方法和回调函数
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- fullpage.js全屏滚动插件使用方法
在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...
- FullPage.js全屏滚动插件
一.介绍 fullPage.js是一个基于jQuery的插件,他能够很方便.很轻松的制作出全屏网站,主要功能有: 1.支持鼠标滚动 2.多个回调函数 3.支持手机.平板触摸事件 4.支持CSS3动画 ...
- jQuery fullPage.js 全屏滚动
fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动.CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备. 在线实例 垂直滚动 水平滚动 CSS3 动画1 CSS3 ...
- 全屏滚动-jQuery插件实现
全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...
随机推荐
- 【IOS 开发】Objective - C 面向对象高级特性 - 包装类 | 类处理 | 类别 | 扩展 | 协议 | 委托 | 异常处理 | 反射
一. Objective-C 对象简单处理 1. 包装类 (1) 包装类简介 NSValue 和 NSNumber : -- 通用包装类 NSValue : NSValue 包装单个 short, i ...
- mysql数据库连接池使用(二)实现自己的数据库连接池
上一个章节,我们讲了xml文件的解析框架XMLConfiguration的使用,不懂的可以参考 Apache Commons Configuration读取xml配置具体使用. 这个章节主要实现自己的 ...
- AndroidStudio如何快速制作.so
之前写过一篇Eclipse制作.so的文章,http://blog.csdn.net/baiyuliang2013/article/details/44306921使用的是GNUstep模拟Linux ...
- Java进阶(六)Java反射机制可恶问题NoSuchFieldException
作为一种重要特性,Java反射机制在很多地方会用到.在此做一小结,供朋友们参考. 首先从一个问题开始着手. 可恶的问题又来了,NoSuchFieldException,如下图所示: 完全不知道这个qu ...
- hive的map类型处理
https://cwiki.apache.org/confluence/display/Hive/LanguageManual+UDF#LanguageManualUDF-CollectionFunc ...
- MySQL 如何使用索引 较为详细的分析和例子
在数据库表中,使用索引可以大大提高查询速度. 假如我们创建了一个 testIndex 表: CREATE TABLE testIndex(i_testID INT NOT NULL,vc_Name V ...
- Learn Lua in 15 Minutes
原文地址:http://tylerneylon.com/a/learn-lua/ Learn Lua in 15 Minutes more or less For a more in-depth Lu ...
- Uva - 506 - System Dependencies
模拟题,注意显示安装和隐式安装,显示安装的必须显示显示删除.把名字转化为整数维护.其他注意都注释了.输入稍微多一下,题目不是很麻烦. AC代码: #include <iostream> # ...
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(七)
因为到目前为止我都是在iOS模拟器中测试,但即便如此,也觉得按住手臂旋转时,手臂转动起来比较费劲,很难停止在玩家期望的位置上.因为手臂完全通过物理引擎的计算来移动,它有自身的惯性影响,所以很难控制. ...
- 解决bootstrap row span设置border换行的问题
Hadoop方面的毕业设计告一段落了,趁这几天空闲时间认真学习一下之前常使用但是却没用好的Bootstrap. 本文记录Bootstrap框架使用栅格系统时,遇到row内的span设置border换行 ...