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. ...
随机推荐
- UNIX环境高级编程——初始化一个守护进程
#include <stdio.h> #include <stdlib.h> #include <signal.h> #include <unistd.h&g ...
- Android简易实战教程--第六话《开发一键锁屏应用2·完成》
转载请注明出处:http://blog.csdn.net/qq_32059827/article/details/51885687点击打开链接 上一篇,初步开发了这个应用,功能都有了(见http:// ...
- Cocos2D iOS之旅:如何写一个敲地鼠游戏(八):为动画建立属性列表
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...
- 8.非关系型数据库（Nosql）之mongodb的应用场景
测试脚本: Mysql测试脚本: [php] view plaincopyprint? 1. <?php 2. header("Content-Type:text/html; ...
- WebLogic11g-负载分发
负载均衡的实现方式有很多种,这里只介绍三种相对来说成本较低的方案(维护成本以及费用成本)weblogic自带的proxy.apache.nginx 1.weblogic自带的proxy方式: 1) ...
- Visual Studio2010 安装pthreads2.9.1
本人最近要利用多线程进行编程,前面一篇博文讲解的是利用VC自带的一些函数库,这里重点探讨一下如何配置pthreads2.9.1的Visual Studio2010的环境.本文分为两个部分,第一部分给出 ...
- 《java入门第一季》之Math类一个小案例获取任意数值范围内随机数
Math:用于数学运算的类. import java.util.Scanner; /* * 需求:请设计一个方法,可以实现获取任意范围内的随机数. * * 分析: * A:键盘录入两个数据. * in ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(十)
上篇最后遇到是神马问题呢? 原来由于现在seq动作的时间变得不确定了,jump的持续时间不能对应发生变化,导致可能选手在比赛后边就没有跳跃动作了!这虽不影响整个代码逻辑,却多少有些让玩家不爽. 一种解 ...
- 【Python】Talk Python To Me Podcast播客
这是Python相关的一个播客,通过播客的形式给大家讲述python那点事,相关的链接都会列出来,有一些是由文本内容的,如果听不太懂就看看英文原文.不fanqiang的情况下,网页打开没有问题,但是播 ...
- （三十一）PickerView自定义视图
例如选择国家,左边是名称右边是国家,不应该使用两列,而是自定义PickerView的一列,可以通过xib来实现. 注意,虽然PickerView也是一列,但是数据源方法是@required,所以必须实 ...