>  기사  >  웹 프론트엔드  >  jQuery 플러그인 fullPage.js가 전체 화면 스크롤 효과를 구현합니다.

jQuery 플러그인 fullPage.js가 전체 화면 스크롤 효과를 구현합니다.

高洛峰
高洛峰원래의
2017-01-03 17:57:431446검색

이 글의 예시는 참고용으로 전체 화면 스크롤 플러그인 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(){
 $(&#39;#dowebok&#39;).fullpage({             
  //fullpage  比较重要 设置的是插件的基本设置 后面的
 sectionsColor: [&#39;#1bbc9b&#39;, &#39;#4BBFC3&#39;, &#39;#7BAABE&#39;, &#39;#f90&#39;]    
  //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(){ 
 $(&#39;#dowebok&#39;).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(){
 $(&#39;#dowebok&#39;).fullpage({
  sectionsColor: [&#39;#1bbc9b&#39;, &#39;#4BBFC3&#39;, &#39;#7BAABE&#39;, &#39;#f90&#39;], //和上面一样 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(){
 $(&#39;#dowebok&#39;).fullpage({
  sectionsColor: [&#39;#1bbc9b&#39;, &#39;#4BBFC3&#39;, &#39;#7BAABE&#39;, &#39;#f90&#39;],
  //设置背景颜色
  afterLoad: function(anchorLink, index){
  //滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算
   if(index == 2){
    $(&#39;.section2&#39;).find(&#39;p&#39;).delay(500).animate({
       //find(&#39;p&#39;) 搜索所有段落中的后代 p 元素
       //delay(500)其中参数为延时值,它的单位是毫秒
       //animate() 方法执行 CSS 属性集的自定义动画
     left: &#39;0&#39;
    }, 1500, &#39;easeOutExpo&#39;); //jQuery Easing 动画效果扩展
   }
   if(index == 3){
    $(&#39;.section3&#39;).find(&#39;p&#39;).delay(500).animate({
     bottom: &#39;0&#39;
    }, 1500, &#39;easeOutExpo&#39;);
   }
   if(index == 4){
    $(&#39;.section4&#39;).find(&#39;p&#39;).fadeIn(2000);
    //fadeIn() 方法逐渐改变被选元素的不透明度,从隐藏到可见(褪色效果)
   }
  },
  onLeave: function(index, direction){
  //滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:index 是离开的“页面”的序号,从1开始计算;
  //nextIndex 是滚动到的“页面”的序号,从1开始计算;
  //direction 判断往上滚动还是往下滚动,值是 up 或 down。
   if(index == &#39;2&#39;){
    $(&#39;.section2&#39;).find(&#39;p&#39;).delay(500).animate({
     left: &#39;-120%&#39;
    }, 1500, &#39;easeOutExpo&#39;);
   }
   if(index == &#39;3&#39;){
    $(&#39;.section3&#39;).find(&#39;p&#39;).delay(500).animate({
     bottom: &#39;-120%&#39;
    }, 1500, &#39;easeOutExpo&#39;);
   }
   if(index == &#39;4&#39;){
    $(&#39;.section4&#39;).find(&#39;p&#39;).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(){
 $(&#39;#dowebok&#39;).fullpage({
  sectionsColor: [&#39;#1bbc9b&#39;, &#39;#4BBFC3&#39;, &#39;#7BAABE&#39;, &#39;#f90&#39;],
  //设置颜色参数
  anchors: [&#39;page1&#39;, &#39;page2&#39;, &#39;page3&#39;, &#39;page4&#39;],
  //定义锚链接
  menu: &#39;#menu&#39;
  //绑定菜单,设定的相关属性与 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(){
 $(&#39;#dowebok&#39;).fullpage({
  sectionsColor: [&#39;#1bbc9b&#39;, &#39;#4BBFC3&#39;, &#39;#7BAABE&#39;, &#39;#f90&#39;],
  //设置颜色属性
  &#39;navigation&#39;: true,
  //是否显示项目导航 默认值是false 需要设置true
 });
});
</script>
<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>圆圈还可以设置位置,颜色,加上 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(){
 $(&#39;#dowebok&#39;).fullpage({
  sectionsColor : [&#39;#1bbc9b&#39;, &#39;#4BBFC3&#39;, &#39;#7BAABE&#39;, &#39;#f90&#39;],
  //设置颜色属性
  continuousVertical: true
  //设置是否循环滚动,与 loopTop 及 loopBottom 不兼容 默认是false
 });
 setInterval(function(){ //定时器 三秒一执行
  $.fn.fullpage.moveSectionDown(); //向下滚动
 }, 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(){
 $(&#39;#dowebok&#39;).fullpage({
  sectionsColor : [&#39;#1bbc9b&#39;, &#39;#4BBFC3&#39;, &#39;#7BAABE&#39;, &#39;#f90&#39;],
  //设置颜色属性
  loopBottom: true
  //loopBottom 布尔值 false 滚动到最底部后是否滚回顶部
 });
 setInterval(function(){
  $.fn.fullpage.moveSlideRight();
  //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(){
 $(&#39;#dowebok&#39;).fullpage({
  sectionsColor : [&#39;#1bbc9b&#39;, &#39;#4BBFC3&#39;, &#39;#7BAABE&#39;, &#39;#f90&#39;]
  //设置颜色属性
 });
 $(window).resize(function(){
 //当调整浏览器窗口的大小时,发生 resize 事件。resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数
  autoScrolling();
  //true 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条
 });
 function autoScrolling(){
  var $ww = $(window).width();
  if($ww < 1024){
   $.fn.fullpage.setAutoScrolling(false);
   //setAutoScrolling() 设置页面滚动方式,设置为 true 时自动滚动 设置为false不滚动
  } else {
   $.fn.fullpage.setAutoScrolling(true);
  }
 }
 autoScrolling();
});
</script>

fullPage.js는 jQuery의 플러그인으로 전체 화면 웹사이트를 만드는 것이 주요 기능입니다. IE7 브라우저 및 기타 주류 브라우저와 호환됩니다. 전체 페이지 플러그인은 다음 작업을 지원합니다

1. 플러그인은 마우스 휠을 사용하여 스크롤할 수 있습니다

2. 화면이 세로일 때 , 스크롤을 위해 키보드의 위쪽 및 아래쪽 화살표를 지원합니다. 수평 화면 비교를 위해 왼쪽 및 오른쪽 화살표를 사용할 수 있습니다

3. 다중 사용 가능 콜백 기능은 애니메이션 효과를 생성하지만 jQuery UI에 대한 플러그인 연결

4. FullPage는 터치에 민감한 노트북 태블릿 및 휴대폰과 같은 터치 이벤트도 지원합니다

5. 속성을 조작할 때 CSS3 애니메이션을 사용할 수 있지만 주의하세요. CSS3 호환성

6. 화면 크기에 맞게 조정 가능

7. 페이지 스크롤 폭과 배경색 반복 재생 여부를 설정할 수 있습니다. 콜백 기능은 다음과 같습니다.

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> 
// 最后是此次的正主 fullPage插件

구성

1. 옵션

jQuery 플러그인 fullPage.js가 전체 화면 스크롤 효과를 구현합니다.

2. 방법

jQuery 플러그인 fullPage.js가 전체 화면 스크롤 효과를 구현합니다.

3. 콜백 함수

jQuery 플러그인 fullPage.js가 전체 화면 스크롤 효과를 구현합니다.

이상은 이 글의 전체 내용입니다. . 모든 분들의 학습에 도움이 되기를 바라며, 또한 모든 분들이 PHP 중국어 웹사이트를 지원해 주시길 바랍니다.

전체 화면 스크롤 효과를 얻기 위한 jQuery 플러그인 fullPage.js와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.