jQuery全屏滚动插件fullPage.js
演 示 下 载
简介
如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
兼容性
jQuery 兼容
兼容 jQuery 1.7+。
浏览器兼容
IE8+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
使用方法
1、引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script><!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的 jQuery UI 代替,如果不需要设置 easing 参数,可去掉改文件 --> <script src="js/jquery.easings.min.js"></script><!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 --> <script src="js/jquery.slimscroll.min.js"></script><script src="js/jquery.fullPage.js"></script>
2、HTML
<div id="dowebok"><div class="section"><h3>第一屏</h3></div><div class="section"><h3>第二屏</h3></div><div class="section"><h3>第三屏</h3></div><div class="section"><h3>第四屏</h3></div> </div>
每个 section 代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 section 加上 class=”active”,如:
<div class="section active">第三屏</div>
同时,可以在 section 内加入 slide,如:
<div id="dowebok"><div class="section">第一屏</div><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>
3、JavaScript
$(function(){$('#dowebok').fullpage(); });
配置
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个参数 |
from:http://www.dowebok.com/77.html
转载于:https://www.cnblogs.com/luhongjian/p/5461359.html
jQuery全屏滚动插件fullPage.js相关推荐
- jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
- html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- Jquary全屏滚动插件fullpage.js的使用
1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站 2.引包 CDNJS地址: https://cdnjs.com/librarie ...
- 全屏滚动插件fullPage.js
效果效果 本文介绍使用fullPage.js插件可轻易创建全屏滚动网站.很多网站只有一个首页,它是由多个可以滚动的全屏内容组成,使用鼠标滚动或方向键可控制滚屏,支持CSS3动画和手机触屏,效果非常高大 ...
- 前端jQuery的全屏滚动插件(使用方法)
全屏滚动:无滚动条,一个屏幕一个屏幕的滚动 gitHub: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Cre ...
- 分享一款jQuery全屏滚动页面特性案例
分享一款jQuery全屏滚动页面特性案例. 我们在来往官网,或者小米官网都会看到全屏滚动页面的一些例子.可以说全屏滚动页面越来越受欢迎.它们就像是竖着的图片轮转一样. 这样的页面有很多,如:iPhon ...
- js修炼——手写全屏滚动插件
全屏滚动是目前网站开发常用的效果,笔者也曾使用过类似插件,但是对此类插件的开发一直抱有强烈兴趣,而今在前人的经验指导下,终于领悟到了一些插件开发的思维. 如下效果: 接下来看PageSwitch.js ...
- html5页面可见xing,【 前端资源 网页插件 】全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
最新文章
- 【面试必备】济南初级java培训
- 小电商的延时队列设计概要
- c++ 操作oracle 最佳方式_oracle备份恢复基础详解
- 【WPF学习】第四十七章 WriteableBitmap类
- 超级终端设置-基本配置(华为)
- 利用display属性写的遮罩层
- SpringBoot学习(三)
- 男人有钱还是没钱,只需要关注他这三点,就明白了
- 在线Excel转TSV工具
- 苹果Mac系统无法输入密码的解决办法
- 【OpenCV学习笔记】【编程实例】一(VS2010/MFC+OPenCV2.4.7读取图片和摄像头)
- Fortran中分配数组大小
- undi是什么意思_undefined什么意思?
- 微信小程序注册/登陆页面及后台接口开发实战(一)
- win10停止更新_win10电脑更新不动的解决方案
- 欠压继电器与过电压继电器
- Wordpress替换Gravatar用户头像,让wordpress会员头像本地化提高加载速度(附代码)
- 深入理解JVM:晚期(运行期)优化
- 给你一部电梯,如何对其进行测试?
- Spring AOP 切面@Around注解的具体使用
热门文章
- java 对象视图框架_Stripes视图框架Java对象属性验证和prototype.js Ajax的测试
- 有机晶体数据库_Cambridge Structural Database 2017 晶体结构分析软件分享
- ROS 创建msg和srv 编写发布者和订阅者节点 编写服务端和客户端节点(python版本)
- 一直显示数据格式错误_Excel数据分析,新手最容易犯的10个建表错误
- otn系统中常用的电层_自动化系统中常用的液位计
- android fragment 弹出对话框,Android中使用Dialogfragment显示对话框
- 离线登陆_iphone手机,苹果手机如何登陆网易163邮箱
- C语言中的文件是什么?
- MySql 创建utf-8格式的数据库
- 华为系统10.0是鸿蒙吗,暂时忘记鸿蒙!华为EMUI 10.0发布时间确认:这才是主角...