学习 | jQuery全屏滚动插件FullPage.js
简介
fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站。
主要功能
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式
兼容性
fullPage.js 支持 IE8+ 及其他现代浏览器。测试代码
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.2/jquery.fullPage.css">
<style>
#myMenu{
width: 900px;
display: block;
position: fixed;
top: 20px;
z-index: 999;
}
#myMenu li{
float: left;
list-style: none;
margin-left: 20px;
text-align: center;
}
#myMenu a {
font-size: 24px;
color: red;
}
#fullpage .section{
font-size: 24px;
color: red;
}
.section:nth-child(3) div{
width: 200px;
margin:0 auto;
}
.btn{
position: fixed;
top: 100px;
z-index: 999;
}
</style>
</head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./jquery-ui.min.js"></script>
<script src="./jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
// 决定是否使用控制箭头向左向右移动幻灯片
controlArrows:true,
// 是否垂直居中网页中的内容
verticalCentered:true,
// 是否在窗口改变大小后，自动调整网页中字体的大小
resize:true,
// 每个屏幕滚动动画执行的时间
scrollingSpeed:700,
// 确定是否使用JavaScript和CSS3转换滚动在切片和幻灯片，如果为true则css3无效
css3:true,
// 定义在滚动屏幕中使用css3:true设置的过度效果，比如赛贝尔曲线
easingcss3:'ease',
// 定义每个section的CSS背景演示
sectionsColor: ['#254875', '#00FF00', '#254587', '#695684'],
// 定义导航的锚文本信息例如（#page1)
anchors: ['page1', 'page2', 'page3', 'page4'],
// 确定是否在URL中的锚点将在插件有任何影响
lockAnchors:false,
// 定义了用于垂直和水平滚动的过渡效果
easing:'easeInOutCubic',
// 定义屏幕滚动到第一个后，是否循序滚动到最后一个
loopTop:false,
// 定义屏幕滚动到最后一个后，是否循环滚动到第一个。
loopBottom:false,
// 定义水平的幻灯片是否循环切换
loopHorizontal:true,
// 义屏幕是否自动滚动，还是需要用户触发事件滚动
autoScrolling:true,
// 设置是否自适应整个窗口的空间,当为true时section将填充到整个页面，否者用户可以停留在网页的任何位置。
fitToSection:true,
// 定义是否使用浏览器默认的滚动条
scrollBar:false,
// 定义是否使用浏览器默认的滚动条
paddingTop:'10px',
// 显示一个小圆圈组成的快速导航栏
navigation: true,
// 结合参数navigation一起使用，用于设置navigation定义的菜单显示的位置，可以设置为left/right。
navigationPosition: 'right',
// 鼠标移动到快速导航上面的提示文本
navigationTooltips: ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
menu:'#myMenu',
// 回调函数
// 1.滚动到某一屏后
afterLoad:function(link,index){
var currentSection =$(this);
if(index===3){
console.log(currentSection);
console.log('is 3 section');
}
if(link==='page2'){
console.log('is 2 section')
}
},
// 滚动前
// index 是离开的“页面”的序号，从1开始计算；
// nextIndex 是滚动到的“页面”的序号，从1开始计算；
// direction 判断往上滚动还是往下滚动，值是 up 或 down。
onLeave:function(index,nextIndex,direction){
var currentSection = $(this);
// 离开第二个到了第三个
if(index==2){
console.log(currentSection);
console.log(nextIndex);
console.log(direction);
console.log('到了第三个,上一个是第二个');
}
if(nextIndex==3){
// return false 取消自动滚动
console.log(1111);
return false;
}
// 不常用的
// afterRender()
// 页面结构生成后的回调函数，或者说是页面初始化完成后的回调函数
// afterResize()
// 浏览器窗口尺寸改变后的回调函数
// afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
// 滚动到某一幻灯片后的回调函数，与afterLoad类似
// onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
// 在我们离开一个slide时，会触发一次此回调函数，与onLeave类似
}
})
// 方法函数
$('.btn').bind('click',function(){
// 设置section向上滚动
$.fn.fullpage.moveSectionUp();
// 设置section向下滚动
// $.fn.fullpage.moveSectionDown();
// 指定section index从0开始
// $.fn.fullpage.moveTo(3);
// 定义每个section/slide滚动的时间
// $.fn.fullpage.setScrollingSpeed(700);
// 设置幻灯片向右滑动
// $.fn.fullpage.moveSlideRight();
// 设置幻灯片向左滑动
// $.fn.fullpage.moveSlideLeft();
})
}) </script>
<body>
<ul id="myMenu">
<li data-menuanchor="page1" class="active"><a href="#page1">First section</a></li>
<li data-menuanchor="page2"><a href="#page2">Second section</a></li>
<li data-menuanchor="page3"><a href="#page3">Third section</a></li>
<li data-menuanchor="page4"><a href="#page4">Fourth section</a></li>
</ul>
<input type="button" style="color:#000;font-size:24px;" value=点击 class="btn">
<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>
</body> </html>
学习 | jQuery全屏滚动插件FullPage.js的更多相关文章
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...
- 仿小米网jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏 ...
- 【转载】jQuery全屏滚动插件fullPage.js
文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些 ...
- jQuery 全屏滚动插件 fullPage.js 参数说明
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- jQuery全屏滚动插件fullPage.js
github https://github.com/alvarotrigo/fullPage.js demo http://alvarotrigo.com/fullPage/ 脚手架 <link ...
- jQuery全屏滚动插件fullPage使用
1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> &l ...
- 制作手机相册 全屏滚动插件fullpage.js
今天是端午自己做了一个小的送祝福链接 这里用到了fullpage插件 $('#container').fullpage({ navigation: false, //navigatio ...
随机推荐
- troubleshoot之:GC调优到底是什么
目录 简介 那些GC的默认值 GC的选择 GC的最大线程个数 初始化heap size 最大的heap size 分层编译技术 我们到底要什么 最大暂停时间 吞吐率 简介 我们经常会听到甚至需要自己动 ...
- unity探索者之微信分享所有流程，非第三方插件
版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/7560575.html 很久没有写新博客了,前段时间有些忙,这几天趟了几个微信分享的 ...
- Java算法之根据二叉树不同遍历结果重建二叉树
二叉树的遍历方式一般包括前序遍历.中序遍历以及后序遍历: 前序遍历:根结点 | 左子树 | 右子树 中序遍历:左子树 | 根结点 | 右子树 后序遍历:左子树 | 右子树 | 根结点 二叉树遍历的性质 ...
- php 正则表达式匹配（持续更新）
正则表达式匹配网址: <?php header('Content-type:text/html;charset=utf-8'); $str = ' 百度http://www.baidu.com网 ...
- WPF实现飞控姿态仪表盘控件Attitude dashboard
一.概要 近期项目当中需要用到飞机控制仪表盘的姿态仪,一开始去各大网站搜索解决方案要么就是winfrom要么就是很老的代码根本不能运行更甚者是居然有的还要下载积分. 只能自己手动从0开始写一个控件.这 ...
- JVM基于栈的解释器执行原理
通过下面这段代码来解释JVM基于栈的执行原理 4. public static int add(int a, int b) { 5. int c = 0; 6. c = a + b; 7. retur ...
- 【亲测】手把手教你如何破解pycharm（附安装包和破解文件）
此教程支持最新的2019.3版本的Pycharm,并兼容之前的版本. 一.准备工作: 1.下载Pycharm 有条件的可以自行去官网下载,这里我提供了我下载的版本,已上传到百度网盘,链接在下方. 2. ...
- 为什么golang中不存在三元运算符
三元运算符广泛存在于其他语言中,比如: python: val = trueValue if expr else falseValue javascript: const val = expr ? t ...
- 为什么建议软件测试自学而不推荐去IT培训机构？浅谈IT培训机构存在的意义
原文地址:https://www.jianshu.com/p/447c65654e84 哥们别太天真啦,知乎上那些到处以大神自居,说培训机构各种神坑不靠谱的,绝对是无利不起早的,很多都是借着贬低别人来 ...
- selenium上手
功能自动化 前提 自动化的主要目的并不是为了找Bug,是为了证明功能可用 不只是所有的功能都可以自动化,如UI 并不是所有的项目都可以使用自动化,如selenium只能使用bs项目,小项目不适合使用自 ...