超级简单实用的前端必备技能-javascript-全屏滚动插件
fullPage.js
fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站
本章内容将详细介绍Android事件的具体处理及常见事件。
主要功能
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 css3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
fullPage.js 支持 IE8+ 及其他现代浏览器
导入插件
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
HTML
<div id="fullpage">
<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>
JS
$(function(){
$('#fullpage').fullpage({
'verticalCentered': false,
'css3': true,
'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
anchors: ['page1', 'page2', 'page3', 'page4'],
'navigation': true,
'navigationPosition': 'right',
'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
})
})
/*组建好网页布局后,必须选中包裹所有 section 的 div 的 id,并调用 fullPage()方法,才能加载布局*/
/*调用 fullPage() 方法后,可以给函数传入对象类型的参数,设置fullPage 的各种属性*/
$('#fullPage').fullpage({
/*内容是否垂直居中,默认true*/
/*verticalCentered:true;*/ /*字体是否随窗口缩放,默认false*/
/*resize:true;*/ /*设置每一屏的背景色*/
/*sectionColor:["#FF0000","#00FF00","#0000FF"],*/ /*设置每一屏的锚点,可以直接跳转到该屏*/
anchors:["page1","page2","page3"], /*设置单页滚动速度,默认700毫秒*/
// scrollingSpeed:300, /*设置滚动动画方式
* JQuery 只支持几种动画特效,更多动画特效,
*/
// easing:"easeInQuart", /*绑定一个菜单 ,详见HTML
*/
// menu:"#menu", /*navigation 布尔值 false 是否显示项目导航小圆点
navigationPosition 字符串 right 项目导航的位置,可选 left 或 right
navigationColor 字符串 #000 项目导航的颜色
navigationTooltips 数组 空 项目导航的 tip 提示*/
navigation:true,
// navigationPosition:"left",
navigationTooltips:["第一页","第二页","第三页"], /*设置幻灯片的导航
* slidesNavigation 布尔值 false 是否显示左右滑块的项目导航
slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置,可选 top 或 bottom*/
slidesNavigation:true, // controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色
controlArrowColor:"RGBA(0,0,0,0.3)", /*loopBottom 布尔值 false 滚动到最底部后是否滚回顶部
loopTop 布尔值 false 滚动到最顶部后是否滚底部
continuousVertical 布尔值 false 是否循环滚动,与 loopTop 及 loopBottom 不兼容 * autoScrolling 布尔值 true 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条*/
continuousVertical:true, /*设置幻灯片是否水平循环,默认true
loopHorizontal 布尔值 true 左右滑块是否循环滑动*/
loopHorizontal:false, /*scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条*/ /*设置内容超出满屏区域后,是否显示滚动条,必须要导入scrolloverflow.js才能使用*/ /*css3 布尔值 false 是否使用 CSS3 transforms 滚动 * paddingTop 字符串 0 与顶部的距离
paddingBottom 字符串 0 与底部距离
*
*
* keyboardScrolling 布尔值 true 是否使用键盘方向键导航
* */ /*手持设备的触控灵敏度 数值越大越难翻页 100%屏幕高度*/
touchSensitivity:7,
/*浏览器直接大开指定锚点时是否滚动效果 animateAnchor 默认为true*/ /*回调函数
*
*
*
*
*
*
*
*
*
*
* afterLoad 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数
* ,anchorLink 是锚链接的名称,index 是序号,从1开始计算 滚动到某一屏后的回调函数
* ,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是当前页面序号,从1开始计算*/ afterLoad:function(anchorLink,index){
console.log(index) ;
console.log(anchorLink);
}, /*onLeave 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:
* index 是离开的“页面”的序号,从1开始计算;
nextIndex 是滚动到的“页面”的序号,从1开始计算;
direction 判断往上滚动还是往下滚动,值是 up 或 down。*/ onLeave:function(index,nextIndex,direction){
console.log(index) ;
console.log(nextIndex) ;
console.log(direction) ;
}, /*afterRender 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数,先执行第一个页面的afterload , 然后在执行afterrender
*/
afterRender:function(){
console.log("这是afterRender 页面初次加载 执行一次的回调函数") }, /*/* afterSlideLoad 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,
接收 anchorLink、幻灯片所在的section的锚点
index、幻灯片所在的section的序号
slideIndex、 幻灯片自身的序号
slideAnchor , 幻灯片自身的锚点(如果没有显示slideindex) 4个参数 onSlideLeave 某一水平滑块滚动前的回调函数,与 onLeave 类似,
当幻灯片离开换到另一张幻灯片时,触发
接收 anchorLink、index、slideIndex、direction、nextSlideIndex 5个参数
anchorLink、幻灯片所在的section的锚点
index、幻灯片所在的section的序号
slideIndex、 幻灯片自身的序号
direction、幻灯片移动的方向,left和right
nextSlideIndex 、切换到的幻灯片的序号,从0开始
*/
}); });
选项 | 类型 | 默认值 | 说明 |
---|---|---|---|
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个参数 |
超级简单实用的前端必备技能-javascript-全屏滚动插件的更多相关文章
- zw版_Halcon图像交换、数据格式、以及超级简单实用的DIY全内存计算.TXT
zw版_Halcon图像交换.数据格式.以及超级简单实用的DIY全内存计算.TXT Halcon由于效率和其他原因,内部图像采用了很多自有格式,提高运行速度,但在数据交换方面非常麻烦. 特别是基于co ...
- JavaScript全屏显示
JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...
- JavaScript 全屏展示
浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...
- javascript全屏操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- 基于gulp编写的一个简单实用的前端开发环境
自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...
- 前端必备技能之Photosh切图
切图:即从设计稿里面切出网页素材 一.使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素 2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用 3.工作区弄乱时,可以使用 ...
- 使用jQuery创建可删除添加行的动态表格,超级简单实用的方法
使用jQuery动态的添加和删除表格里面的行,不多说了直接上代码. <!DOCTYPE html> <html> <head> <meta charset=& ...
- 原生js实现简单的全屏滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- ABP+AdminLTE+Bootstrap Table权限管理系统第四节--仓储,服务,服务接口及依赖注入
在ABP框架中,仓储,服务,这块算是最为重要一块之一了.ABP框架提供了创建和组装模块的基础,一个模块能够依赖于另一个模块,一个程序集可看成一个模块, 一个模块可以通过一个类来定义这个模块,而给定义这 ...
- struts2增删改查---layer---iframe层---通配符---国际化
在前一篇文章的基础上,修改一部分即可(在此只是简单介绍) struts.xml页面 在原来的基础之上 action的name="*_*" class="包名.{1}&q ...
- 【CPP】字符串和格式化输入输出
前导:数组(array),字符串转换说明符%s,定义符号常量,,strlen()获取字符串长度,. [字符串] 没有专门的字符串类型,是吧他存储在字符型数组中,数组最后一个字符为空字符'\0',c用他 ...
- 在windows平台下electron-builder实现前端程序的打包与自动更新
由于8月份上旬公司开发一款桌面应用程序,在前端开发程序打包更新时遇到一些困扰多日的问题,采用electron-builder最终还是得到解决~ 以下是踩坑的过程及对electron打包与更新思路的梳理 ...
- RMAN备份-未使用catalog-控制文件丢失
情况描述 客户报告数据库故障,新来的系统管理员误操作.删掉了一些文件.具体情况是:删掉了所有重要数据文件.所有控制文件.数据库原来是归档模式,用rman备份数据,而rman 使用控制文件. 幸运的是, ...
- Oracle用户操作
1.超级管理员的身份登录oracle:sqlplus / as sysdba 2.显示当前连接用户SQL> show user 3.新建用户并授权SQL> create user a ...
- Android 划屏切换调用finish()方法闪屏问题
找了许多资料,偶然发现有种解决方法,就是修改style.xml里的Theme,有些NotitleBar,透明主题直接就能将此问题解决 原理也很简单,如果透明,背景色既为透明色,调用finish()时虽 ...
- Apache Kafka系列(四) 多线程Consumer方案
Apache Kafka系列(一) 起步 Apache Kafka系列(二) 命令行工具(CLI) Apache Kafka系列(三) Java API使用 Apache Kafka系列(四) 多线程 ...
- HTML5之dir属性
<p style="text-align:center"><bdo dir="RTL">芙蓉楼送辛渐</bdo></p ...
- Ngnix+tomcat负载均衡
系统环境 Centos6.5 nginx1.4.7 https://nginx.org/download/nginx-1.4.7.tar.gz tomcat7.0.79 http://apache. ...