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
.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>
 <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 不兼容
 });
});
</script>
<div id="dowebok">
 <div class="section section1">
  <h3>第一屏</h3>
  <p>fullPage.js — 回调函数演示</p>
 </div>
 <div class="section section2">
  <h3>第二屏</h3>
  <p>滚动到第二屏后的回调函数执行的效果</p>
 </div>
 <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"&g