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

高洛峰
풀어 주다: 2017-01-03 17:57:43
원래의
1464명이 탐색했습니다.

이 글의 예시는 참고용으로 전체 화면 스크롤 플러그인 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를 사용할 때 참고한 파일은 다음과 같습니다. <링크 순서에 주의하셔야 합니다. 먼저 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> 
// 最后是此次的正主 fullPage插件
로그인 후 복사

구성

1. 옵션

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

2. 방법

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

3. 콜백 함수

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

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿