jQuery插件fullPage.js实现全屏滚动效果
本⽂实例为⼤家分享了全屏滚动插件fullPage.js的具体使⽤⽅法，供⼤家参考，具体内容如下
0.01 基本演⽰的HTML 布局以及js 代码
//需要连接连接的三个⽂件
<link rel="stylesheet" href="css/jquery.fullPage.css"> //css⽂件
<script src="js/jquery-1.8.3.min.js"></script> //jQuery 1.8.3的版本
<script src="js/jquery.fullPage.min.js"></script> //fullPage插件的压缩版本
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} //可以改动设置的是⽹页中的⽂字 <⽆关紧要>
</style>
<script>
$(function(){
$('#dowebok').fullpage({
//fullpage ⽐较重要设置的是插件的基本设置后⾯的
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
//sectionsColor 当没有背景图⽚的时候这个就是设置背景颜⾊的否则就是空⽩数组的形式中间以逗号隔开颜⾊不管是⼗六进制还是英⽂单词都需要⽤单引号包着 });
});
</script>
<div id="dowebok"> //绑定的⼤盒⼦设置滚动的盒⼦
<div class="section">
<h3>第⼀屏</h3>
<p>fullPage.js — 基本演⽰</p>
</div>
<div class="section"> //滚动的第⼆屏幕如果在⾥⾯添加div和slide的样式就可以增加横向点击
<div class="slide"><h3>第⼆屏的第⼀屏</h3></div>
<div class="slide"><h3>第⼆屏的第⼆屏</h3></div>
<div class="slide"><h3>第⼆屏的第三屏</h3></div>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后⼀屏</p>
</div>
</div>
0.02 插⼊背景图⽚演⽰的HTML 布局以及js 代码 <；需要链接的⽂件都是⼀样的>
<style> //需要注意的是这⾥没有设置颜⾊⽽是在css中设置的背景图⽚0
api接口什么意思.section1 { background: url(images/1.jpg) 50%;}
.section2 { background: url(images/2.jpg) 50%;}
.section3 { background: url(images/3.jpg) 50%;}
.section4 { background: url(images/4.jpg) 50%;}
</style>
<script>
$(function(){
$('#dowebok').fullpage(); //到⼤盒⼦设置fullpage全屏滚动
});
</script>
<div id="dowebok">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
</div>
0.03 循环演⽰ html 布局以及js代码 <；需要链接的⽂件都是⼀样的>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'], //和上⾯⼀样 sectionsColor 是设置每⼀屏的颜⾊必须⽤逗号隔开单引号包着
continuousVertical: false, //设置是否滑到底层再往下滚动是第⼀张图设置true是执⾏此操作设置false是不执⾏默认不执⾏不执⾏就不设置
});
});
</script>
<div id="dowebok">
<div class="section">
<h3>第⼀屏</h3>
<p>fullPage.js — 循环演⽰</p>
</div>
<div class="section">
<h3>第⼆屏</h3>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后⼀屏了，继续往下滚返回第⼀屏</p>
</div>
</div>
0.04 回调函数演⽰
<title>fullPage.js — 回调函数演⽰</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
.section2 p { position: relative; left: -120%;}
.section3 p { position: relative; bottom: -120%;}
.section4 p { display: none;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//设置背景颜⾊
afterLoad: function(anchorLink, index){
//滚动到某⼀屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 if(index == 2){
$('.section2').find('p').delay(500).animate({
//find('p') 搜索所有段落中的后代 p 元素
//delay(500)其中参数为延时值，它的单位是毫秒
//animate() ⽅法执⾏ CSS 属性集的⾃定义动画
left: '0'
}, 1500, 'easeOutExpo'); //jQuery Easing 动画效果扩展
}
if(index == 3){
$('.section3').find('p').delay(500).animate({
bottom: '0'
}, 1500, 'easeOutExpo');
}
if(index == 4){
$('.section4').find('p').fadeIn(2000);
//fadeIn() ⽅法逐渐改变被选元素的不透明度，从隐藏到可见（褪⾊效果）
}
},
onLeave: function(index, direction){
//滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页⾯”的序号，从1开始计算；
//nextIndex 是滚动到的“页⾯”的序号，从1开始计算；
//direction 判断往上滚动还是往下滚动，值是 up 或 down。
if(index == '2'){
$('.section2').find('p').delay(500).animate({
left: '-120%'
}, 1500, 'easeOutExpo');
}
if(index == '3'){
$('.section3').find('p').delay(500).animate({
bottom: '-120%'
}, 1500, 'easeOutExpo');
}
if(index == '4'){
$('.section4').find('p').fadeOut(2000);
//fadeOut() ⽅法逐渐改变被选元素的不透明度，从可见到隐藏（褪⾊效果）
}
},
continuousVertical: false,
// 是否循环滚动，与 loopTop 及 loopBottom 不兼容
sumif求和公式怎么用});
});
</script>
<div id="dowebok">
<div class="section section1">
<h3>第⼀屏</h3>
<p>fullPage.js — 回调函数演⽰</p>
</div>
<div class="section section2">
<h3>第⼆屏</h3>
<p>滚动到第⼆屏后的回调函数执⾏的效果</p>
<div class="section section3">
<h3>第三屏</h3>
<p>滚动到第三屏后的回调函数执⾏的效果</p>
</div>
<div class="section section4">
<h3>第四屏</h3>
<p>滚动到第四屏后的回调函数执⾏的效果</p>
</div>
</div>
0.05 绑定菜单⽅法
<title>fullPage.js — 绑定菜单演⽰_dowebok</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<style>
#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;}
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//设置颜⾊参数
anchors: ['page1', 'page2', 'page3', 'page4'],
//定义锚链接
menu: '#menu'
//绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
});
});
</script>
<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>
</ul>
<div id="dowebok">
<div class="section">
<h3>第⼀屏</h3>
<p>fullPage.js — 绑定菜单演⽰</p>
</div>
<div class="section">
<h3>第⼆屏</h3>
<p>请查看左上⾓，点击可以控制</p>
</div>
<div class="section">
<h3>第三屏</h3>
<p>绑定的菜单没有默认的样式，你需要⾃⾏编写</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后⼀屏</p>
</div>
</div>
0.06 项⽬导航演⽰
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//设置颜⾊属性
'navigation': true,
//是否显⽰项⽬导航默认值是false 需要设置true
});
});
</script>
<div id="dowebok">
<div class="section">
<h3>第⼀屏</h3>
<p>fullPage.js — 项⽬导航演⽰</p>
</div>
<div class="section">
<h3>第⼆屏</h3>
<p>请查看右边的圆圈</p>
toolbar使用</div>
<div class="section">
<h3>第三屏</h3>
<p>圆圈还可以设置位置，颜⾊，加上 tip，点击可以控制</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后⼀屏</p>
</div>
</div>
0.07 ⾃动循环滚动
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} </style>
<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>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
/
/设置颜⾊属性
continuousVertical: true
//设置是否循环滚动，与 loopTop 及 loopBottom 不兼容默认是false });
setInterval(function(){ //定时器三秒⼀执⾏
$.veSectionDown(); //向下滚动
}, 3000);
});
</script>
0.08 设置横屏的⾃动播放
<style>
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} </style>
<div id="dowebok">
<div class="section">
<h3>第⼀屏</h3>
<p>请滚动到第⼆屏查看</p>
</div>
<div class="section">
<div class="slide"><h3>第⼆屏的第⼀屏</h3></div>
<div class="slide"><h3>第⼆屏的第⼆屏</h3></div>
<div class="slide"><h3>第⼆屏的第三屏</h3></div>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//设置颜⾊属性
loopBottom: true
//loopBottom 布尔值 false 滚动到最底部后是否滚回顶部
});
setInterval(function(){
$.veSlideRight();
//moveSlideRight() slide 向右滚动
// moveSlideLeft() slide 向左滚动
}, 3000);
});
</script>
0.09 判断当前浏览器的宽度⼩于多少的时候关闭滚动
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<style>
.section { text-align: center; font: 30px "Microsoft Yahei"; color: #fff;}
</style>
<div id="dowebok">
<div class="section">
<p>根据可视区域⼤⼩启⽤/关闭全屏滚动效果</p>
数据库技术发展趋势</div>
<div class="section">
<p>如果可视区宽度⼩于1024，则关闭全屏滚动效果，使⽤⾃带的滚动条</p>
</div>
<div class="section">
<p>请试着调整浏览器⼤⼩并查看滚动条是否出现</p>
</div>
<div class="section">
<p>第四屏</p>
</div>
</div>
<script>
$(function(){
$('#dowebok').fullpage({
sectionsColor : ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
//设置颜⾊属性
});
$(window).resize(function(){
//当调整浏览器窗⼝的⼤⼩时，发⽣ resize 事件。resize() ⽅法触发 resize 事件，或规定当发⽣ resize 事件时运⾏的函数
autoScrolling();
//true 是否使⽤插件的滚动⽅式，如果选择 false，则会出现浏览器⾃带的滚动条
});
function autoScrolling(){
var $ww = $(window).width();
if($ww < 1024){jquery下载文件插件
$.fn.fullpage.setAutoScrolling(false);
//setAutoScrolling() 设置页⾯滚动⽅式，设置为 true 时⾃动滚动设置为false不滚动
} else {
$.fn.fullpage.setAutoScrolling(true);
}
}
autoScrolling();
});
</script>
fullPage.js 是 jQuery 的⼀个插件，主要功能是制作出全屏⽹站 fullPage插件的兼容性是兼容IE7浏览器往上其余主流浏览器就不描叙了 fullpage插件⽀持以下操作
1、插件可以使⽤⿏标滑轮进⾏滚动
2、当竖屏的时候⽀持键盘的上下箭头滚动横屏对照可以使⽤的是左右箭头
3、能使⽤多个回调函数制作出动画效果但是需要涉及到jQuery ui的插件连接<；在下⾯有>
4、fullPage 同样也是⽀持触摸事件如可触摸式笔记本平板⼿机
5、能在属性操作时使⽤css3动画但是要注意 css3的兼容性
6、能够⾃适应屏幕的⼤⼩
7、可以设置页⾯的滚动宽度以及背景颜⾊是否循环播放可以时候回调函数⽂本可以设置样式
使⽤ fullPage中我引⽤的⽂件具体如下所⽰ <；必须注意链接顺序先css⽂件再jQuery 1.8.3版本的然后才是 jQuer ul 或者是 fullPage 插件> 注意！所需链接⽂件可像我留⾔索要也可寻⾃⾏下载
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
//这是设置关于插件的样式需要链接
<script src="js/jquery.min.js"></script>
// jQuery 1.8.3版本
<script src="js/jquery-ui.js"></script>
// JQuery ui 版本1.12.1 <；可选>需要设置Easing参数时必须链接否则出错
<script src="js/jquery.fullPage.js"></script>
promise中文意思// 最后是此次的正主 fullPage插件
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论