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. ...
随机推荐
- 8.非关系型数据库（Nosql）之mongodb的应用场景
测试脚本: Mysql测试脚本: [php] view plaincopyprint? 1. <?php 2. header("Content-Type:text/html; ...
- 套接字工厂——ServerSocketFactory
接收器Acceptor在接收连接的过程中,根据不同的使用场合可能需要不同的安全级别,例如在支付相关的交易就必须对信息加密后再发送,这其中还涉及到密钥协商的过程,而在另外一些普通场合则无需对报文加密.反 ...
- Redefine：Change in the Changing World
EMC World 2014的主题就是REDEFINE.的确,现在科技的发展在重新定义了技术,影响了生活,改变了你我. 对于一个有数万员工,甚至数十万员工的企业来说,Redefine无疑更加具有挑战, ...
- Java-IO之管道（PipedInputStream和PipedOutputStream）
java中PipedInputStream和PipedOutputStream分别是管道输入流和管道输出流,它的作用是让多线程可以通过管道进行线程间的通讯,在使用管道通信时,必须将PipedInput ...
- Cocos2D中使用CCDrawNode绘制几何图形崩溃的解决
在cocos2D v3.x中已经不能像在v2.x中那样直接调用ccDrawXXX函数来绘制几何图形了. 我们可以使用CCDrawNode或者CCRenderer来绘制图形. 但是官方的Api手册中说的 ...
- pig读取部分列 (全部列中的少部分列)
pig流式数据,load数据时,不能读入任意列. 但是,可以从头读,只能连续几列.就是前几列.比如10列数据,可以只读前3列.但不能读第3列: 如:数据testdata [wizad@sr104 lm ...
- Demand Side Platform
DSP特点: DSP不是从网络媒体那里包买广告位,也不是采用CPD(Cost Per Day)的方式获得广告位:而是从广告交易平台(AdExchange)来通过实时竞价的方式获得对广告进行曝光的机会, ...
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 【一天一道LeetCode】#36. Valid Sudoku
一天一道LeetCode 本系列文章已全部上传至我的github,地址:https://github.com/Zeecoders/LeetCode 欢迎转载,转载请注明出处 (一)题目 Determi ...
- c++中各个数据类型的大小
来哦金额各种数据类型有助于我们对这门语言的更好掌握,更好的利用之来编程,下面是一个简单的获得数据类型的大小的程序,虽然简单,但实用性却很高. #include <iostream> usi ...