【转载】fullpage.js学习
参考网址:http://www.dowebok.com/77.html 上面有详细介绍及案例展示,很不错哦,可以先去看看demo
一、简介
fullPage.js 是一个基于jQuery的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
二、获取方式:
四、如何使用:
<div id="fullpage"><div class="section"> //每一个session对应一个页面<div class="slide">slide1</div>//可以给每个页面加slide幻灯片<div class="slide">slide2</div><div class="slide">slide3</div></div><div class="section"><h1>这是第二屏</h1></div><div class="section">content</div> </div>
<script>$(document).ready(function(){$('#fullpage').fullpage();})//在加载fullpage的时候引入fullpage方法。 </script>
五、配置项
1.sectionColor:
2.controlArrows:
3.verticalCentered:
4.resize:
5.scrollingSpeed:
6.anchors:
7.lockAnchors:
8.active:
9.easing:
10.css3:
11.loopTop:
12.loopBottom:
13.loopHorizontal:
14.autoScrolling:
15.scrollBar:
16.paddingTop/paddingBottom:
17.fixedElements:
18.keyboardScrolling:
19.touchSensitivity:
20.continuousVertical:
是否循环滚动,默认为false。如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和loopTop、loopBottom不兼容,不要同时设置。
21.animateAnchor:
22..recordHistory:
是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。注意如果设置了autoScrolling:false,那么这个配置也将被关闭,即设置为false。
23.menu:
绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery选择器
24..navigation:
是否显示导航,默认为false。如果设置为true,会显示小圆点,作为导航。
25.navigationPosition:
导航小圆点的位置,可以设置为left或right。
26.navigationTooltips:
导航小圆点的tooltips设置鼠标经过时显示的名字,默认为[],注意按照顺序设置。
27.showActiveTooltip:
是否显示当前页面的导航的tooltip信息,默认为false
28.slidesNavigation:
是否显示横向幻灯片的导航,默认false。
29.slidesNavPosition:
横向幻灯片导航的位置,默认为bottom,可以设置为top或bottom
30.scrollOverflow:
内容超过满屏后是否显示滚动条,默认为false。如果设置为true,则会显示滚动条,如果要滚动查看内容,还需要jquery.slimscroll插件的配合。
31.slimscroll:
插件主要用于模拟传统的浏览器滚动条。
32.sectionSelector:
33.slideSelector:
六、方法
1.moveSectionUp():
2.moveSectionDown():
3.moveTo(section,slide):
4.slientMoveTo(section,slide):
5.moveSlideRight():
6.moveSlideLeft():
7.slientMoveTo(section,slide):
8.moveSlideRight():
9.moveSlideLeft():
10.setAutoScrolling(boolean):
11.setLockAnchors(boolean):
12.setRecordHistory(boolean):
13.setScrollingSpeed(milliseconds):
14.setAllowScrolling(boolean,[directions]):
15.destroy(type)
16.reBuild()
七、fullPage支持延迟加载图片和视频(Lazy Loading)
八、回调函数
1.afterLoad(anchorLink,index)
滚动到某一section,且滚动结束后,会触发一次此回调函数,函数接受anchorLink和index两个参数,anchorLink是锚链接的名称,index是序号,从1开始计算。
我们可以根据anchorLink和index参数值的判断,触发相应的事件。
2.onleave(index,nextIndex,direction)
在我们离开一个section时,会触发一次此回调函数,接受index、nextIndex和direction 3个参数:
index是离开的“页面”的序号,从1开始计算;
nextIndex是滚动到的目标“页面”的序号,从1开始计算;
direction判断往上滚动还是往下滚动,值是up或down。
通过return false;可以取消滚动
3.afterRender()
页面结构生成后的回调函数,或者说页面初始化完成后的回调函数。
4.afterResize()
浏览器窗口尺寸改变后的回调函数
5.afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滚动到某一幻灯片后的回调函数,与afterLoad类似,接受anchorLink、index、slidIndex、direction4个参数。
6.onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
在我们离开一个slide时,会触发一次此回调函数,与onLeave类似,接收anchorLink、index、slideIndex、direction4个参数
.设计页面
.准备文字和图片素材
.按照设计实现基本的页面效果
.实现动画
1.set()方法用于设置元素的css属性,他带有两个参数:css属性和属性值。
2.scale()方法用于放大或压缩元素的大小,按照提供的每一个值,将调用transform的scale方法。
3.rotate(deg)方法通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的transform属性上。
4.eng()方法用于Move.js代码片段的结束,它标识动画的结束。技术上,该方法触发动画的播放。该方法接受一个可选的callback回掉函数。
转载于:https://www.cnblogs.com/blogCode929817775/p/7102512.html
【转载】fullpage.js学习相关推荐
- ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
- backbone.js学习笔记
backbone.js学习笔记 之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- 程序员的高速学习法——以JS学习为例,进行图解
近期一直在忙着学习,感觉做总结的时间太少了,听起来挺好玩儿的,就像<倾城之恋>里面.范柳原说:那时候都忙着谈恋爱了哪里有时间恋爱. 学习和总结也是一样.不能一直忙着学习而导致自己没有时间 ...
- node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一 内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
- node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析 微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
- 转【FullPage.js 应用参数参考与简单调用】
简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站 ...
- jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...
- fullpage.js(cndjs)
fullpage API(配置项) <script> $(document).ready(function(){ $('#fullpage').fullpage({ sectionsCol ...
最新文章
- 强行分类提取特征自编码网络例2
- 如何在vim保存时获得sudo权限
- 6、Cocos2dx 3.0游戏开发的基本概念找个小三场比赛
- Git使用方法——原创
- 小朋友嘴里的“金钥匙”,良品小食仙、小鹿蓝蓝们要如何拿到?
- 今天,给我妈打电话聊了我爸
- mysql增删改查扩展_MySQL(增删改查补充)
- python执行shell脚本、执行mongodb_mongodb执行js脚本(一)---shell执行
- vSAN 内存或 SSD 拥堵已达到阈值限制 (2071384)
- 今天终于结束了考试,不知道结果
- 根据TTL值判断目标主机的类型
- Excel 表格排版--会议记录表
- 西门子atch指令详解_西门子PLC中断指令?
- python定义一个函数实现整数的幂运算_Leetcode练习(Python):第326题:3的幂:给定一个整数,写一个函数来判断它是否是 3 的幂次方。...
- 7-8 愿天下有情人都是失散多年的兄妹 (25分)
- 智能指针(三):weak_ptr浅析
- CNS数据链测试模拟平台——POCKET
- java解析webp格式图片宽高;java解析webp图片转png格式
- 昆山python线下培训班,苏州昆山有没有python培训班(会python的好处)
- 搞机吧 | 刷rec、线刷、卡刷教程
热门文章
- 【CodeForces - 270A】Fancy Fence (几何,思维,水题)
- 【CodeForces - 215B 】Olympic Medal (数学,公式推导)
- 图解算法学习笔记(六):广度优先搜索
- 计算机应用类专业综合冲刺卷,2009年计算机应用类专业综合知识模拟试卷.doc
- 如何通过属性给实体赋值
- 使用对象操作流程,读写文件
- java 旋转方向,Java 2d方向鼠标点旋转
- 图像 理想低通滤波_图像处理之滤波(下)
- 《剑指offer》全解(图文结合,通俗易懂,一篇看爽)
- C++:39---继承中构造函数、析构函数的关系