fullpage.js jq全屏滚动插件
fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用。
(代码演示效果并且可以下载查看http://www.dowebok.com/77.html)
一、fullPage.js实现全屏
fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js
1、基本演示
1.1 引入文件
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./fullPage.js-master/jquery.fullPage.css" />
<!-- fullpage.js依赖于jquery库 -->
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.min.js"></script>
1.2 css:引入的css并不是给元素设置样式的,元素的样式需要自己写
<style type="text/css">
body
{
color: #FFFFFF;
}
.section1
{
background-color: #BFDA00;
}
.section2
{
background-color: #2EBE21;
}
.section3
{
background-color: #2C3E50;
}
.section4
{
background-color: #FF9900;
}
</style>
1.3 html:每一个section代码一屏,默认从第一屏显示,若需要自定义从某屏开始显示,为section添加active类。示例默认从第三屏显示
<div id="ido">
<div class="section section1">
<h1>每一个section是一屏,这是第一屏</h3>
</div>
<div class="section section2">
<h1>每一个section是一屏,这是第二屏</h3>
</div>
<div class="section section3 active">
<h1>每一个section是一屏,这是第三屏</h3>
</div>
<div class="section section4">
<h1>每一个section是一屏,这是第四屏</h3>
</div>
</div>
1.4 js:
<script type="text/javascript">
$(function() {
$("#ido").fullpage();
});
</script>
效果:http://denon-7c931.coding.io/fullpagejs.html
1.5 可以在某屏中再添加子滚动屏,借助slide类。修改上述第二个section如下:
<div class="section section2" style="text-align:center">
<h1 class="slide">第二屏的第一屏</h1>
<h1 class="slide">第二屏的第二屏</h1>
<h1 class="slide">第二屏的第三屏</h1>
<h1 class="slide">第二屏的第四屏</h1>
</div>
1.6 添加背景屏,在html添加两个section
<div class="section section5">
<h1>每一个section是一屏,这是第5屏--图片背景</h3>
</div>
<div class="section section6">
<h1>每一个section是一屏,这是第6屏--图片背景</h3>
</div>
添加css
.section5 { background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;}
.section6 { background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;}
效果:http://denon-7c931.coding.io/bjfull.html (滚动到5和6屏)
1.7 循环演示:continuousVertical设置为true
$(function() {
$("#ido").fullpage(
{
continuousVertical: true
});
});
效果:http://denon-7c931.coding.io/xhfull.html (滚动到第6屏,再向下滚动时自动回到第一屏)
1.8 绑定菜单:添加菜单项
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
<li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
<li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
<li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
<li data-menuanchor="page5"><a href="#page5">第5屏</a></li>
<li data-menuanchor="page6"><a href="#page6">第6屏</a></li>
</ul>
添加css
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin: 0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}
修改js
$(function() {
$("#ido").fullpage(
{
continuousVertical: true, //循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu',
});
});
效果:http://denon-7c931.coding.io/memufull.html
1.9 导航演示:设置’navigation': true,
$(function() {
$("#ido").fullpage(
{
continuousVertical: true, //循环演示
//绑定菜单
anchors: ['page1', 'page2', 'page3', 'page4','page5','page6'],
menu: '#menu',
// 导航
'navigation': true,
});
});
效果:http://denon-7c931.coding.io/navfull.html (导航在右侧)
2、配置如图
如果需要配置easing和scrollOverflow,则需要引入额外的js(在vendors目录下)
<!-- jquery.easings.min.js 用于 easing 参数,也可以使用完整的 jQuery UI 代替,如果不需要设置 easing 参数,可去掉改文件 -->
<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.easings.min.js"></script>
<!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 -->
<script type="text/javascript" src="./fullPage.js-master/vendors/jquery.slimscroll.min.js"></script>
二、fullPage实现全屏
fullPage 是一款不依赖任何 js 库的全屏滚动组件,支持垂直/水平滚动、CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备。其Github地址:https://github.com/powy1993/fullpage
1、基本演示
<script type="text/javascript" src="./fullpage-master/js/fullPage.min.js"></script>
1.1 垂直滚动
css
body {
width: 100%;
*cursor: default;
overflow: hidden;
font: 16px/1.5 "Microsoft YaHei";
}
div,p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#pageContain {
overflow: hidden;
}
.page {
display: none;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.contain {
width: 100%;
height: 100%;
display: none;
position: relative;
z-index: 0;
}
.current .contain,.slide .contain {
display: block;
}
.current {
display: block;
z-index: 1;
}
.slide {
display: block;
z-index: 2;
}
.page1 {
background: #37c1e3;
}
.page2 {
background: #009922;
}
.page3 {
background: #992211;
}
.page4 {
background: #ff00ff;
}
.page5 {
background: #00ff00;
}
.page6 {
background: #22ffff;
}
#navBar {
z-index: 3;
position: absolute;
top: 10%;
right: 3%;
}
#navBar .active {
background: #ccc;
}
#navBar li {
cursor: pointer;
margin-bottom: 10px;
transition: all .7s ease;
border-radius: 50%;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
}
h1
{
text-align: center;
margin-top: 20%;
}
html
<div id="pageContain">
<div class="page page1 current">
<div class="contain">
<h1 class="txt">第一屏</h1>
</div>
</div>
<div class="page page2">
<div class="contain">
<h1 class="txt">第二屏</h1>
</div>
</div>
<div class="page page3">
<div class="contain">
<h1 class="txt">第三屏</h1>
</div>
</div>
<div class="page page4">
<div class="contain">
<h1 class="txt">第四屏</h1>
</div>
</div>
<div class="page page5">
<div class="contain">
<h1 class="txt">第五屏</h1>
</div>
</div>
</div>
<ul id="navBar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
js
var runPage;
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
effect: {
transform: {
translate: 'Y' //垂直滚动,改为X则是水平滚动
},
opacity: [0, 1]
},
mode: 'wheel, touch, nav:navBar',
easing: 'ease'
});
效果:http://denon-7c931.coding.io/fullpage.html
1.2 css3动画:修改js就行
var runPage;
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
effect: {
transform: {
translate: 'X',
scale: [0, 1],
rotate: [270, 0]
},
opacity: [0, 1]
},
mode: 'wheel, touch, nav:navBar',
easing: 'ease'
});
效果:http://denon-7c931.coding.io/fulldh.html
1.3 自动滚动,js修改如下
var runPage, interval, autoPlay;
autoPlay = function(to) {
clearTimeout(interval);
interval = setTimeout(function() {
runPage.go(to);
}, 1000);
}
runPage = new FullPage({
id: 'pageContain',
slideTime: 800,
effect: {
transform: {
translate: 'X',
scale: [0, 1],
rotate: [270, 0]
},
opacity: [0, 1]
},
mode: 'wheel, touch, nav:navBar',
easing: 'ease',
callback: function(index, thisPage){
index = index + 1 > 3 ? 0 : index + 1;
autoPlay(index);
}
});
interval = setTimeout(function() {
runPage.go(runPage.thisPage() + 1);
}, 1000);
效果:http://denon-7c931.coding.io/fullauto.html
2、配置如图
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 jq全屏滚动插件的更多相关文章
- jquery.fullPage.js全屏滚动插件教程演示
css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- fullpage.js全屏滚动插件使用方法
在移动端经常会用到全屏滚动插件,实现常见H5活动页的效果,fullpage是一个很不错的jquery全屏滚动插件 fullpage.js插件的API:http://www.dowebok.com/77 ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 插件代码可以在这里找到. 注意,虽然是 ...
- AlloyTouch全屏滚动插件搞定顺滑H5页
使用姿势 在设计全屏滚动插件的时候,希望开发者几乎: 不用写任何脚本快速生成精致H5 支持PC滚轮和移动触摸 酷炫的转场动效 灵活的时间轴管理 一切皆可配置 但是不写脚本肯定没有灵活性咯?!不是的.这 ...
- Scrollify – jQuery全屏滚动插件
和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件.跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB.但功能上不如 fu ...
- fullpage.js全屏滚动插件使用小结
刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
随机推荐
- truffle的调用nodeJs的问题
Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误) 升级到Truffle3.0 如果之前安装的是Truffle2.0版本,需要主动升级到Truffle3.0,两者的语法变化有点大 ...
- 并查集——poj2492(带权并查集入门)
一.题目回顾 题目链接:传送门 题意:给定n只虫子,不同性别的可以在一起,相同性别的不能在一起.给你m对虫子,判断中间有没有同性别在一起的. 二.解题思路 种类并查集 和poj1073的本质一样 详见 ...
- 阿里云服务器 linux下载 jdk
直接从本地下载包上传比较慢.直接在服务器上下载安装包: 1.进入orcle官网; 2.选择需要下载的版本,下载需要同意orcle协议, 3.点击下载,获取到下载请求的cookie, 复制所有cooki ...
- PHP全局变量局部变量
http://www.w3school.com.cn/php/php_variables.asp
- javaScript的流程控制语句学习笔记
JavaScript提供了5种流程控制语句,if条件判断语句,switch语句,for循环语句,while循环语句,do-while循环语句. 1.条件判读语句 对变量或表达式进行判定,并根据判定结果 ...
- 【bzoj4817】[Sdoi2017]树点涂色 LCT+LCA+线段树
题目描述 给出一棵n个点,以1为根的有根树,每个点初始染有互不相同的颜色.定义一条路径的权值为路径上的颜色种类数.现有m次操作,每次操作为以下三种之一: 1 x: 把点x到根节点的路径上所有的点染上一 ...
- HDU——1394 Minimum Inversion Number
Problem Description The inversion number of a given number sequence a1, a2, ..., an is the number of ...
- [POI2007]ATR-Tourist Attractions
题目大意:一个无向图,从$1$到$n$,要求必须经过$2,3,\dots,k+1$,给出一些限制关系,要求在经过$v\leq k+1$之前必须经过$u\leq k+1$,求最短路 题解:预处理出$1\ ...
- MySQL:BlackHole
MySQL:BlackHole 顾名思义BlackHole就是黑洞,只有写入没有输出.现在就来实验一下吧 首先查看一下MySQL支持的存储引擎 mysql> show engines;+---- ...
- LA2995 Image is everything
蓝书P12 #include <cstdio> #include <cstring> #include <cmath> #include <algorithm ...