第十二周第一天笔记之fullpage全屏页面滚动实例

2018-10-15 本文已影响0人果木山

fullPage运动的实例

第一屏的制作
- 思路：
  - 要实现动画效果，就必须给需要运动的元素添加定位布局；
  - 在添加定位布局时，设置top值，要注意页面在最开始就设置了paddingTop为100px，所以需要加上paddingTop的值，还可以将paddingTop修改为marginTop，但是效果就会不好，背景图不会填充margin，会填充padding；
  - 通过分别设置每个运动元素的透明度为0，和transform中的translate值，来进行运动初始值的设置；
  - 怎样才能触发运动，需要给每个运动元素设置一个current的class名，给每个current名下面的每个元素设置一个运动终点值，即透明度为1，translate值为0,0；添加一个过渡transition；
  - 可以考虑使用active类名，省略current类名；
```
 .current:nth-child(1) .title,.current:nth-child(1) .phone,.current:nth-child(1) .shandow{
     transition: all 1s;
     opacity: 1;
     transform: translate(0,0);
 }
```
  - 通过添加current的class名来触发过渡运动；
  - 在html中fullpage参数中的afterLoad函数中设置，afterLoad函数中的实参有三个，第二个参数为一个对象，对象中存在属性名index，属性值为每一个屏的索引值；从0开始；
  - 通过获取的索引值，来获取第一个div元素，给其添加class名为current；添加定时器，让运动延迟执行；
  - 当滑到第二屏后，再滑回第一屏时，原来的位置已经存在，所以需要在afterLoad函数一开始就删除所有section中的current的class名；
- 三步曲：
  1. 先写好跟需求一样的静态页面效果；
  2. 通过opacity和transform把它改变到初始的运动位置；
  3. 当滚动到这屏时，给当前的section添加current的class名，其中current所做的事情，就是利用过渡(transition,animation)动态显示；
- 代码：
  - css样式代码：
```
 /*第一屏*/
 .section:nth-child(1){
     background-color: lightslategrey;
     position: relative;
 }
 .section:nth-child(1) .title{
     font-size: 37px;
     margin-top: 50px;
     width: 100%;
     text-align: center;
     color: lightsalmon;
     opacity: 0;
     transform: translateY(50px);
 }
 .section:nth-child(1) .phone{
     background: url("../img/1.png");
     width: 586px;
     height: 212px;
     background-size: cover;
     position: absolute;
     left: 50%;
     margin-left: -293px;
     margin-top: 50px;
     opacity: 0;
     transform: translateY(-100%);
 }
 .section:nth-child(1) .shandow{
     width: 600px;
     height: 50px;
     background-color: lightcoral;
     position: absolute;
     text-align: center;
     line-height: 50px;
     left: 50%;
     bottom: 100px;
     margin-left: -300px;
     font-size: 37px;
     opacity: 0;
     transform: translateX(100px);
 }
 .current:nth-child(1) .title,.current:nth-child(1) .phone,.current:nth-child(1) .shandow{
     transition: all 1s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第一屏-end*/
```
  - html样式代码：
```
 afterLoad: function (anchorLink, sec) {
     //通过index值来设置某一屏
     $(".section").removeClass("current");
     setTimeout(function () {
         $(".section").eq(sec.index).addClass("current");
     },200)
 }
```
第二屏的制作：
- 思路：
  1. 静态页面的制作；
  2. 箭头处动效的制作：1）创建两个伪类元素before,after，定位在p元素上；2）对两个伪类元素添加animation运动，创建运动帧move，当0%，100%时，让其透明度为0，缩放为0；当50%时，让其透明度为0.6，缩放为1；当加载后，会实现一个闪烁的效果，为了使效果更加漂亮，让其中一个伪类延迟一段时间运动，此段时间为整个运动总时间的一半，这样两个伪类元素的收缩运动就不同时发生；
```
 .section:nth-child(2) .phone p::before,.section:nth-child(2) .phone p::after{
     position: absolute;
     width: 25px;
     height: 25px;
     content: "";
     border-radius: 50%;
     background-color: blue;
     top: 0;
     opacity: 0.1;
     animation: move 2s infinite;
 }
 .section:nth-child(2) .phone p::after{
     animation-delay: 1s;
 }
 @-webkit-keyframes move {
     0%,100%{
         transform: scale(0);
         opacity: 0;
     }
     50%{
         transform: scale(1);
         opacity: 0.6;
     }
 }
 .section:nth-child(2) .phone p.pointl::before,.section:nth-child(2) .phone p.pointl::after{
     right: 0;
 }
 .section:nth-child(2) .phone p.point2::before,.section:nth-child(2) .phone p.point3::before,.section:nth-child(2) .phone p.point2::after,.section:nth-child(2) .phone p.point3::after{
     left: 0;
 }
```
  1. 实现页面的动效运动：添加current的class名，与第一屏一样，在afterLoad函数中已经对每一屏进行添加current的class名，只需在current下操作就行；给每个需要运动的元素，添加运动的初始值，然后在current下添加运动的终点值，也就是静态页面的位置；为了使箭头跟图片不同时出现，则给其添加延迟；
```
 .current:nth-child(2) .title,.current:nth-child(2) .intro,.current:nth-child(2) .phone,.current:nth-child(2) .phone p.pointl,.current:nth-child(2) .phone p.point2,.current:nth-child(2) .phone p.point3{
     transition: all 2s;
     opacity: 1;
     transform: translate(0,0);
 }
 .current:nth-child(2) .phone p.pointl,.current:nth-child(2) .phone p.point2,.current:nth-child(2) .phone p.point3{
     transition-delay: 2s;
 }
```
- 知识点：
  - 页面结构中，设置三个箭头时，通过将图设置为背景色，然后通过paddingLeft值来实现文字与图片位置分开，也可通过设置总宽度，然后通过设置文字的对齐方式，来将文字与背景图分离开；
    - 1）设置总宽度，然后将文字左对齐，背景图右对齐；2）设置宽度后，文字与背景图重合，然后通过padding来将它们分开；
  - 添加运动的思路，给每一个元素设置运动初始值，然后在current下设置运动终点值，即在html中设置当滚到这一屏时，就给其添加current的class名，进而触发运动；
  - 箭头处圆点的闪烁效果，通过animation运动来实现，通过设置伪类元素来进行操作，在通过设置move运动中的不同位置，来达到不同阶段的效果，最重要的是通过延迟时间来实现不同步发生；
  - animation与transition运动延迟时间的运动，通过延迟时间的设置，达到不同步执行的效果；
头部导航栏中的滑动门的制作
- 思路：
  1. 创建滑块：相对于ul定位
  2. 给li添加鼠标移入事件，移入后让滑块的left值相对应的进行设置；
  3. 给li添加鼠标移出事件，移出后让滑块回到，class名存在active的li的位置；通过each()来遍历$aLi，通过hasClass()来判断是否存在active的class名，然后利用each的第一个参数来获取li的索引值；
  4. 当添加鼠标事件时，要去除掉立即购买的li；
  5. 去掉右侧导航栏中最后一个li,利用JS不能设置，可以利用CSS进行覆盖设置样式；
  6. 点击导航栏中的每个li，跳转到指定的页面，然后让滑块滑动到li下面，文字变为红色，实现三联动的效果，所以需要在afterLoad中设置；
  7. 设置当重新刷新加载后，回到第一屏；通过锚点设置；
- 知识点：
  - last-child与last-of-type的区别；
    - last-child表示其父元素的最后一个子元素，且这个元素是css指定的元素，才可以生效。
    - last-of-type表示其父元素下的最后一个指定类型的元素。
  - 在排除最后一个li时的代码：var $aLi=$("#myMenu").children("li:not(.lastLi)");
  - 在去掉右侧导航栏中的最后一个li时，利用JS设置，验证后无法获取元素，所以可以利用CSS进行样式覆盖，利用控制台，获取到最后一个li的位置，然后进行覆盖设置；
  - 锚点知识：window对象中存在location属性，属性中存在hash属性，属性值为锚点；所以通过window.location.hash="firstPage";来设置锚点；进而控制页面的跳转；
```
/*右侧导航栏-start*/
#fp-nav ul li:last-child, .fp-slidesNav ul li:last-child{
    display: none;
}
#fp-nav ul li .fp-tooltip{
    color: blue;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
    background: red;
}
/*右侧导航栏-end*/
```
- 注意点：
  - 在添加事件时，要设置padding，不能设置margin，鼠标移入移出之间不针对与margin；会出错；
  - 添加运动，利用jQuery中的animate({},time)；
  - 在afterLoad函数中设置，三联动的时候，一定要排除掉最后一屏；

实例完整版代码

html代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>fullpage实例</title>
     <link rel="stylesheet" href="CSS/fullpage.css">
     <link rel="stylesheet" href="CSS/index.css">
 </head>
 <body>
 <header>
     <div class="logo"><img src="img/mi-logo.png" alt="">手机项目</div>
     <ul id="myMenu">
         <li data-menuanchor="firstPage" class="active"><a href="#firstPage">首页</a></li>
         <li data-menuanchor="secondPage"><a href="#secondPage">外观</a></li>
         <li data-menuanchor="thirdPage"><a href="#thirdPage">配置</a></li>
         <li data-menuanchor="fourthPage"><a href="#fourthPage">型号</a></li>
         <li data-menuanchor="fifthPage"><a href="#fifthPage">说明</a></li>
         <li data-menuanchor="sixthPage" class="lastLi"><a href="#sixthPage">立即购买</a></li>
         <p class="huakuai"></p>
     </ul>
 </header>
 <div class="fullPage" id="fullPage">
     <div class="section">
         <h2 class="title"><span>小米手机</span> 让你的生活更精彩</h2>
         <div class="phone"></div>
         <div class="shandow">来啊，飘起来</div>
     </div>
     <div class="section">
         <div class="title">全面屏 + 四曲面陶瓷<br/>手机中的艺术品</div>
         <div class="intro">自小米MIX 发布以来，不仅先后斩获多项国际大奖，更被多家世界级博物馆收藏。<br/>如此全方位、多领域的高度认可，小米MIX 系列堪称手机中的艺术品。</div>
         <div class="phone">
             <p class="pointl">高清摄像</p>
             <p class="point2">超薄机身</p>
             <p class="point3">大屏显示</p>
         </div>
     </div>
     <div class="section">
         <div class="cont">
             <div class="title">优美的设计，更令人着迷</div>
             <div class="intro">自小米MIX 发布以来，不仅先后斩获多项国际大奖，更被多家世界级博物馆收藏。<br/>如此全方位、多领域的高度认可，小米MIX 系列堪称手机中的艺术品。</div>
             <div class="cont-center">
                 <div>
                     5.7<br/>英寸大屏
                 </div>
                 <div>
                     5.7<br/>英寸大屏
                 </div>
                 <div>
                     5.7<br/>英寸大屏
                 </div>
                 <div>
                     5.7<br/>英寸大屏
                 </div>
             </div>
         </div>
     </div>
     <div class="section">
         <div class="title">丰富手机型号</div>
         <div class="intro">找到适合你的手机</div>
         <div class="stu">
             <div class="tu1">
                 <img src="img/P1.jpg" alt="">
                 <h3>小米手机</h3>
                 <p>16G/32G/64G</p>
             </div>
             <div class="tu1">
                 <img src="img/p2.png" alt="">
                 <h3>小米手机</h3>
                 <p>16G/32G/64G</p>
             </div>
             <div class="tu1">
                 <img src="img/p3.jpg" alt="">
                 <h3>小米手机</h3>
                 <p>16G/32G/64G</p>
             </div>
             <div class="tu1">
                 <img src="img/p4.jpg" alt="">
                 <h3>小米手机</h3>
                 <p>16G/32G/64G</p>
             </div>
         </div>
     </div>
     <div class="section">
         <div class="title">美丽的女子</div>
         <div class="intro">找到适合你的好女人</div>
         <div class="phone"></div>
     </div>
     <div class="section fp-auto-height">
         <footer>
             立即购买
         </footer>
     </div>
 </div>
 <script src="JS/jquery.js"></script>
 <script src="JS/fullpage.js"></script>
 <script>
     //导航栏滑动门制作
     var $oHua=$("#myMenu").find(".huakuai");
     var $aLi=$("#myMenu").children("li:not(.lastLi)");//去除最后一个li
     //加载回到第一屏
     window.location.hash="firstPage";
     //添加事件
     $aLi.mouseover(function () {
         //此时this为每个li元素
         $oHua.stop().animate({
             left: $(this).index()*(28+36)+18
         },400)
     }).mouseout(function () {
         //用each，遍历li
         //注意：鼠标移出事件区域，包含margin，即移出border后，移出事件触发；
         $aLi.each(function (index) {
             if($(this).hasClass("active")){
                 $oHua.stop().animate({
                     left: index*(28+36)+18
                 },400)
             }
         })
     });
     //滚屏制作
     $("#fullPage").fullpage({
         licenseKey:"OPEN-SOURCE-GPLV3-LICENSE",
         //文本是否垂直居中；
         verticalCentered: false,
         css3: true,
         //滚动到某一屏后的回调函数
         afterLoad: function (anchorLink, sec) {
             //通过index值来设置某一屏
             //小于5的目的是，当滑到最后一屏时，第五屏的不消失；
             if(sec.index<5){
                 $(".section").removeClass("current");
                 //当滑到某一屏时，使滑动门滑到那一屏对应的导航下，对应的导航颜色变红
                 $aLi.eq(sec.index).addClass("active").siblings("li").removeClass("active");
                 $oHua.stop().animate({
                     left: sec.index*(28+36)+18
                 },400);
             }
             setTimeout(function () {
                 $(".section").eq(sec.index).addClass("current");
             },200)
         },
         //右侧导航
         navigation: true,
         navigationPosition:"right",
         navigationTooltips:["首页","外观","配置","型号","说明","立即购买"],
         menu: true,
         anchors: ["firstPage","secondPage","thirdPage","fourthPage","fifthPage","sixthPage"]
     });
     //通过JS来操作顶部导航覆盖内容的问题
     for(var i=0; i<5; i++){
         $(".section").eq(i).css({
             paddingTop: "100px"
         })
     }
 </script>
 </body>
 </html>

css代码：

 /*重置样式*/
 *{
     margin: 0;
     padding: 0;
     list-style: none;
 }
 body{
     font-size: 14px;
 }
 a{
     text-decoration: none;
     color: #333333;
 }
 /*重置样式end*/
 /*header*/
 header{
     width: 100%;
     height: 80px;
     line-height: 80px;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 99;
     background-color: lavender;
 }
 header .logo{
     margin-left: 10px;
     float: left;
 }
 header .logo img{
     display: inline-block;
     width: 47px;
     height: 47px;
     background-color: orangered;
     vertical-align: middle;
     margin-right: 20px;
 }
 header>ul{
     margin-right: 10px;
     float: right;
     position: relative;
 }
 header>ul>li{
     float: left;
     padding: 0 18px;
 }
 header>ul>li.lastLi{
     padding: 0;
     margin-left: 18px;
 }
 header>ul>li.active a{
     color: red;
 }
 header>ul>li:last-of-type{
     width: 82px;
     height: 34px;
     text-align: center;
     line-height: 34px;
     margin-top: 23px;
     border-radius: 5px;
     background-color: black;
 }
 header>ul>li:last-of-type a{
     color: white;
 }
 header>ul>.huakuai{
     position: absolute;
     top: 66px;
     left: 18px;
     width: 28px;
     height: 6px;
     background-color: red;
 }
 /*header-end*/
 /*右侧导航栏-start*/
 #fp-nav ul li:last-child, .fp-slidesNav ul li:last-child{
     display: none;
 }
 #fp-nav ul li .fp-tooltip{
     color: blue;
 }
 #fp-nav ul li a span, .fp-slidesNav ul li a span{
     background: red;
 }
 /*右侧导航栏-end*/
 
 /*第一屏*/
 .section:nth-child(1){
     background-color: lightslategrey;
     position: relative;
 }
 .section:nth-child(1) .title{
     font-size: 37px;
     margin-top: 50px;
     width: 100%;
     text-align: center;
     color: lightsalmon;
     /*设置初始的运动位置*/
     opacity: 0;
     transform: translateY(50px);
 }
 .section:nth-child(1) .phone{
     background: url("../img/1.png");
     width: 586px;
     height: 212px;
     background-size: cover;
     position: absolute;
     left: 50%;
     margin-left: -293px;
     margin-top: 50px;
     /*设置初始的运动位置*/
     opacity: 0;
     transform: translateY(-100%);
 }
 .section:nth-child(1) .shandow{
     width: 600px;
     height: 50px;
     background-color: lightcoral;
     position: absolute;
     text-align: center;
     line-height: 50px;
     left: 50%;
     bottom: 100px;
     margin-left: -300px;
     font-size: 37px;
     /*设置初始的运动位置*/
     opacity: 0;
     transform: translateX(100px);
 }
 /*通过添加current的class名，来设置运动效果*/
 .current:nth-child(1) .title,.current:nth-child(1) .phone,.current:nth-child(1) .shandow{
     transition: all 1s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第一屏-end*/
 
 /*第二屏-start*/
 .section:nth-child(2){
     background-color: #f7f7f7;
     position: relative;
 }
 .section:nth-child(2) .title{
     width: 340px;
     height: 96px;
     line-height: 48px;
     font-size: 34px;
     font-weight: 600;
     position: absolute;
     top: 130px;
     left: 50%;
     margin-left: -170px;
     text-align: center;
     /*初始运动位置*/
     opacity: 0;
     transform: translate(0,100%);
 }
 .section:nth-child(2) .intro{
     width: 580px;
     height: 46px;
     line-height: 26px;
     font-size: 16px;
     position: absolute;
     top: 280px;
     left: 50%;
     margin-left: -290px;
     text-align: center;
     opacity: 0;
     /*此时的100%为自身的高度*/
     transform: translate(0,-100%);
 }
 .section:nth-child(2) .phone{
     width:600px;
     height: 372px;
     background: url("../img/infor-2.jpg") no-repeat;
     background-position: center -190px;
     background-size: 200%;
     position: absolute;
     top: 380px;
     left: 50%;
     margin-left: -300px;
     /*设置图片的初始位置*/
     opacity: 0;
     transform: translate(0,100%);
 }
 .section:nth-child(2) .phone p{
     position: absolute;
     width: 110px;
     height: 24px;
     font-size: 18px;
     line-height: 24px;
 }
 /*添加伪类元素*/
 .section:nth-child(2) .phone p::before,.section:nth-child(2) .phone p::after{
     position: absolute;
     width: 25px;
     height: 25px;
     content: "";
     border-radius: 50%;
     background-color: blue;
     top: 0;
     opacity: 0.1;
     animation: move 2s infinite;
 }
 .section:nth-child(2) .phone p::after{
     animation-delay: 1s;
 }
 @-webkit-keyframes move {
     0%,100%{
         transform: scale(0);
         opacity: 0;
     }
     50%{
         transform: scale(1);
         opacity: 0.6;
     }
 }
 .section:nth-child(2) .phone p.pointl::before,.section:nth-child(2) .phone p.pointl::after{
     right: 0;
 }
 .section:nth-child(2) .phone p.point2::before,.section:nth-child(2) .phone p.point3::before,.section:nth-child(2) .phone p.point2::after,.section:nth-child(2) .phone p.point3::after{
     left: 0;
 }
 .section:nth-child(2) .phone p.pointl{
     background: url("../img/jianr.png") no-repeat right center;
     top: 68px;
     left: -48px;
     padding-right: 110px;
     opacity: 0;
     transform: translate(-150px,0);
 }
 .section:nth-child(2) .phone p.point2{
     background: url("../img/jianleft.png") no-repeat left center;
     top: 28px;
     left: 390px;
     padding-left: 150px;
     opacity: 0;
     transform: translate(150px,0);
 }
 .section:nth-child(2) .phone p.point3{
     background: url("../img/jianleft.png") no-repeat left center;
     top: 170px;
     left: 422px;
     padding-left: 150px;
     opacity: 0;
     transform: translate(150px,0);
 }
 /*设置运动效果，添加class名为current*/
 .current:nth-child(2) .title,.current:nth-child(2) .intro,.current:nth-child(2) .phone,.current:nth-child(2) .phone p.pointl,.current:nth-child(2) .phone p.point2,.current:nth-child(2) .phone p.point3{
     transition: all 2s;
     opacity: 1;
     transform: translate(0,0);
 }
 .current:nth-child(2) .phone p.pointl,.current:nth-child(2) .phone p.point2,.current:nth-child(2) .phone p.point3{
     transition-delay: 2s;
 }
 /*第二屏-end*/
 /*第三屏-start*/
 .section:nth-child(3){
     background-color: #c22220;
 }
 .section:nth-child(3) .cont{
     width: 50%;
     height: 200px;
     margin-left: 100px;
     position: relative;
     color: white;
 }
 .section:nth-child(3) .cont .title{
     width: 340px;
     height: 96px;
     line-height: 96px;
     font-size: 30px;
     position: absolute;
     top: 0;
     left: 0;
     text-align: left;
     /*初始运动位置*/
     opacity: 0;
     transform: translate(0,50px);
 }
 .section:nth-child(3) .cont .intro{
     width: 580px;
     height: 46px;
     line-height: 26px;
     font-size: 16px;
     position: absolute;
     top: 100px;
     left: 0;
     text-align: left;
     opacity: 0;
     /*此时的100%为自身的高度*/
     transform: translate(0,-20px);
 }
 .section:nth-child(3) .cont .cont-center{
     width: 240px;
     height: 240px;
     position: absolute;
     top: 240px;
     left: 0;
     opacity: 0;
     transform: scale(0.5);
 }
 .section:nth-child(3) .cont .cont-center > div{
     width: 112px;
     height: 112px;
     padding-top: 24px;
     line-height: 34px;
     border: 1px solid white;
     border-radius: 4px;
     box-sizing: border-box;
     color: white;
     text-align: center;
     float: left;
     margin-bottom: 16px;
     transition: all 1s;
 }
 .section:nth-child(3) .cont .cont-center > div:hover{
     transform: scale(1.1);
 }
 .section:nth-child(3) .cont .cont-center > div:nth-child(2n){
     margin-left: 16px;
 }
 .current:nth-child(3) .cont .title,.current:nth-child(3) .cont .intro,.current:nth-child(3) .cont .cont-center{
     transition: all 1.5s;
     opacity: 1;
     transform: translate(0,0) scale(1);
 }
 /*第三屏-end*/
 
 /*第四屏-start*/
 .section:nth-child(4){
     background-color: lavenderblush;
     position: relative;
 }
 .section:nth-child(4) .title{
     width: 340px;
     height: 96px;
     line-height: 48px;
     font-size: 34px;
     font-weight: 600;
     position: absolute;
     top: 130px;
     left: 50%;
     margin-left: -170px;
     text-align: center;
     /*初始运动位置*/
     opacity: 0;
     transform: translate(0,100%);
 }
 .section:nth-child(4) .intro{
     width: 580px;
     height: 46px;
     line-height: 26px;
     font-size: 16px;
     position: absolute;
     top: 240px;
     left: 50%;
     margin-left: -290px;
     text-align: center;
     opacity: 0;
     /*此时的100%为自身的高度*/
     transform: translate(0,-100%);
 }
 .section:nth-child(4) .stu{
     width: 1000px;
     height: 250px;
     margin: 200px auto 0;
 }
 .section:nth-child(4) .stu .tu1{
     width: 220px;
     height: 300px;
     text-align: center;
     float: left;
     margin-right: 30px;
     opacity: 0;
 }
 .section:nth-child(4) .stu .tu1 h3{
 
 }
 .section:nth-child(4) .stu .tu1 p{
     margin-top: 10px;
     color: blue;
 }
 .current:nth-child(4) .title,.current:nth-child(4) .intro,.current:nth-child(4) .stu .tu1{
     transition: all 1.5s;
     opacity: 1;
     transform: translate(0,0);
 }
 .current:nth-child(4) .stu .tu1:nth-child(2){
     transition-delay: 1s;
 }
 .current:nth-child(4) .stu .tu1:nth-child(3){
     transition-delay: 1.5s;
 }
 .current:nth-child(4) .stu .tu1:nth-child(4){
     transition-delay: 2.0s;
 }
 /*第四屏-end*/
 
 /*第五屏-start*/
 .section:nth-child(5){
     background-color: lightsalmon;
     position: relative;
 }
 .section:nth-child(5) .title{
     width: 340px;
     height: 96px;
     line-height: 48px;
     font-size: 34px;
     font-weight: 600;
     position: absolute;
     top: 130px;
     left: 50%;
     margin-left: -170px;
     text-align: center;
     /*初始运动位置*/
     opacity: 0;
     transform: translate(0,100%);
 }
 .section:nth-child(5) .intro{
     width: 580px;
     height: 46px;
     line-height: 26px;
     font-size: 16px;
     position: absolute;
     top: 240px;
     left: 50%;
     margin-left: -290px;
     text-align: center;
     opacity: 0;
     /*此时的100%为自身的高度*/
     transform: translate(0,-100%);
 }
 .section:nth-child(5) .phone{
     width: 1000px;
     height: 500px;
     background: url("../img/2.jpg");
     background-size: cover;
     position: absolute;
     left: 50%;
     top: 370px;
     margin-left: -500px;
     opacity: 0;
     transform: translate(0,100%);
 }
 .current:nth-child(5) .title,.current:nth-child(5) .intro,.current:nth-child(5) .phone{
     transition: all 1.5s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第五屏-end*/
 /*第六屏-start*/
 .section:nth-child(6){
 }
 .section:nth-child(6) footer{
     background-color: lightslategray;
     height: 150px;
     text-align: center;
     line-height: 150px;
     font-size: 40px;
     color: orange;
 }
 /*第六屏-end*/

fullPage插件实例复习版

实例知识
- 回调函数
  - afterLoad: 滚动到某一屏后的回调函数，接收两个参数；
  - onLeave: 在滚动到下一屏之前的回调函数，接收三个参数；
- 导航栏滑动色块的知识点
  - 页面布局：色块添加绝对定位，导航栏ul为绝对定位，即色块要相对于ul进行定位移动；色块在html中可以放在ul下的第一个li中；
  - 滑块的移动位置获取，可以获取li元素的offsetLeft值；滑动效果，要在滑块中添加过渡transition；
  - 三大事件：mouseover,mouseleave,click
    - 通过事件委托绑定在ul父级元素上，利用冒泡原理，在事件中获取事件源，然后进行一系列的操作；
    - mouseover事件：
      - 事件源为li或a元素；
      - 获取li的offsetLeft值来作为滑块定位的left值；设置属性滑动；
      - 筛除立即购买的li,当滑到其身上时，滑块不设置；
      - 当滑块滑到立即购买的li上时，让滑块回到点亮的位置处，可遍历其的所有兄弟元素，然后哪个存在cur类名，然后设置位置到此处；
    - mouseleave事件：
      - 与mouseout事件的对比：优点在于将ul和其下的所有子元素看成一个整体，只有在移出ul时，才会触发mouseleave事件；
      - 事件触发后，让滑块回到点亮位置处；
      - 注意：当光标移动到立即购买的li时，也不算移出，所以不会触发事件，所以就必须与mouseover事件中的设置对应，当光标移入立即购买的li时，让光标回到点亮处；二者相互照应；
    - click事件：
      - 事件源必须为a元素，因为只有点击a链接时，屏幕才会跳转；
      - 事件触发后，让a元素的父级节点li设置cur类名，其他的li兄弟删除cur类名；
  - 滚动页面时对应的导航栏的滑块滑动和对应的导航点亮
    - 利用onLeave回调函数，获取到下一屏的index值，然后设置对应导航的操作；
- 知识点：
  - 在排除最后一个li时的代码:var $aLi=$("#myMenu").children("li:not(.lastLi)");
  - 锚点知识：window对象中存在location属性，属性中存在hash属性，属性值为锚点；所以通过window.location.hash="firstPage";来设置锚点；进而控制页面的跳转

代码：

html和js代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>复习fullpage插件实例</title>
     <link rel="stylesheet" href="../plugins/fullpage/fullpage.css">
     <link rel="stylesheet" href="./myindex.css">
     <script src="../toolLibrary/jquery.js"></script>
     <script src="../plugins/fullpage/fullpage.js"></script>
     <script>
         $(function () {
             //页面加载，跳转到第一屏；
             window.location.hash="firstPage";
             //设置fullpage的基本配置
             $("#fullpage").fullpage({
                 "licenseKey":"OPEN-SOURCE-GPLV3-LICENSE",
                 "verticalCentered": false,
                 "paddingTop": "80px",
                 "css3": true,
                 "sectionsColor": ["lightblue","#f7f7f7","#c22220","lightgreen","lightsalmon"],
                 "anchors": ["firstPage","secondPage","thirdPage","fourthPage","fifthPage","sixthPage"],
                 "menu": "#myMenu",
                 "navigation": true,
                 "navigationPosition": "right",
                 "navigationColor": "red",
                 "navigationTooltips": ["首页","外观","配置","型号","说明"],
                 onLeave:function (leaveLink,toLink,direction) {
                     if(!$("#myMenu").children("li").eq(toLink.index).hasClass("gou")){
                         $("#myMenu").children("li").eq(toLink.index).addClass("cur").siblings("li").removeClass("cur");
                         $("header .huamen").css("left",$("#myMenu").children("li").eq(toLink.index)[0].offsetLeft);
                     }
                 },
                 afterLoad:function (outLink,inLink) {
                     //在滚到每一屏时，将所有section的current类名删除；
                     if(inLink.index!==5){
                         $("#fullpage").children(".section").removeClass("current");
                     }
                     //设置对应屏的类名；
                     $("#fullpage").children(".section").eq(inLink.index).addClass("current");
                 }
             });
             //将底部的paddingTop删除
             $("#fullpage").children(".section").eq(5).css("paddingTop",0);
             //添加事件：事件委托，通过冒泡原理
             $("#myMenu").on("mouseover",toOver).on("mouseleave",toLeave).on("click",toClick);
             //mouseover事件
             function toOver(e) {
                 //当事件源为a或li时，移动色条
                 if(e.target.nodeName==="A" || e.target.nodeName==="LI"){
                     if(e.target.nodeName==="A"){
                         e.target=e.target.parentNode;
                     }
                     var oLeft=e.target.offsetLeft;
                     if($(e.target).hasClass("gou")) {
                         //如果为立即购买的li，让其回到点亮位置
                         $(e.target).siblings().each(function () {
                             if($(this).hasClass("cur")){
                                 oLeft=this.offsetLeft;
                             }
                         })
                     }
                     $("header .huamen").css("left", oLeft);
                 }
             }
             //li元素的mouseleave事件
             function toLeave() {
                 //回到点亮li的位置处
                 $("#myMenu").children("li").each(function () {
                     if($(this).hasClass("cur")){
                         $("header .huamen").css("left",this.offsetLeft);
                     }
                 })
             }
             //click事件：给点击元素对应的li添加类名cur;
             function toClick(e) {
                 //事件源必须是a
                 if(e.target.nodeName==="A"){
                     if(!$(e.target.parentNode).hasClass("gou")){
                         $(e.target.parentNode).addClass("cur").siblings("li").removeClass("cur");
                     }
                 }
             }
         });
     </script>
 </head>
 <body>
 <header>
     <div class="logo"><a href="javascript:void(0);"></a><span>手机项目</span></div>
     <ul id="myMenu" class="myMenu">
         <li data-menuanchor="firstPage" class="menuList cur">
             <a href="#firstPage">首页</a>
             <span class="huamen"></span>
         </li>
         <li data-menuanchor="secondPage" class="menuList"><a href="#secondPage">外观</a></li>
         <li data-menuanchor="thirdPage" class="menuList"><a href="#thirdPage">配置</a></li>
         <li data-menuanchor="fourthPage" class="menuList"><a href="#fourthPage">型号</a></li>
         <li data-menuanchor="fifthPage" class="menuList"><a href="#fifthPage">说明</a></li>
         <li data-menuanchor="sixthPage" class="menuList gou"><a href="#sixthPage">立即购买</a></li>
     </ul>
 </header>
 <div id="fullpage" class="fullpage">
     <!--第一屏-->
     <div class="section">
         <p>小米手机 让你的生活更加精彩</p>
         <div><img src="./fullimg/img1/1.png" alt=""></div>
         <p>来啊，骚动起来</p>
     </div>
     <!--第二屏-->
     <div class="section">
         <p>全面屏+四曲面陶瓷<br/>手机中的艺术品</p>
         <p>自小米MIX 发布以来，不仅先后斩获多项国际大奖，更被多家世界级博物馆收藏。<br/>如此全方位、多领域的高度认可，小米MIX 系列堪称手机中的艺术品。</p>
         <div>
             <span>高清摄像</span>
             <span>超薄机身</span>
             <span>大屏显示</span>
         </div>
     </div>
     <!--第三屏-->
     <div class="section">
         <div class="slide">
             <p>优美的设计 更加迷人</p>
             <p>让我们红尘作伴活的潇潇洒洒，策马奔腾共享人世繁华，啊啊啊。<br/>对酒当歌唱出心中喜悦，风风火火共享人世繁华</p>
             <ul>
                 <li>
                     <p>5.7</p>
                     <p>英寸大屏</p>
                 </li>
                 <li>
                     <p>6.0 G</p>
                     <p>运行内存</p>
                 </li>
                 <li>
                     <p>128 G</p>
                     <p>储存内存</p>
                 </li>
                 <li>
                     <p>12000</p>
                     <p>拍照像素</p>
                 </li>
             </ul>
             <div><img src="./fullimg/img1/mi8.jpg" alt="mi9"></div>
         </div>
         <div class="slide">
             第三屏内的第二分屏
         </div>
     </div>
     <!--第四屏-->
     <div class="section">第四屏</div>
     <!--第五屏-->
     <div class="section">
         <p>果木山的女神</p>
         <p>唯一不变，清纯可爱</p>
         <div><img src="./fullimg/p1.jpg" alt="ns1"></div>
     </div>
     <!--底部-->
     <div class="section fp-auto-height">
         <footer>
             立即购买
         </footer>
     </div>
 </div>
 </body>
 </html>

myindex.css代码：

 /*初始化*/
 *{
     margin: 0;
     padding: 0;
     list-style: none;
 }
 /*header区域*/
 header{
     width: 100%;
     height: 80px;
     background-color: lavender;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 2;
     font-size: 14px;
 }
 header .logo{
     width: 160px;
     height: 80px;
     line-height: 80px;
     float: left;
 }
 header .logo a{
     display: inline-block;
     width: 48px;
     height: 48px;
     background: url("./fullimg/mi-logo.png") no-repeat orangered;
     background-size: cover;
     margin: 15px 22px 16px 10px;
     float: left;
 }
 header .logo span{
     display: inline-block;
     line-height: 80px;
     float: left;
 }
 header .myMenu{
     width: auto;
     height: 80px;
     line-height: 80px;
     float: right;
     position: relative;
 }
 header .myMenu li{
     float: left;
 }
 header .myMenu li+li{
     margin-left: 36px;
 }
 header .myMenu li a{
     text-decoration: none;
     color: black;
 }
 header .myMenu li.cur a{
     color: red;
 }
 header .myMenu li.gou{
     height: 32px;
     line-height: 28px;
     margin-right: 10px;
     margin-top: 24px;
     padding: 2px 12px;
     background-color: black;
     box-sizing: border-box;
     border-radius: 6px;
 }
 header .myMenu li.gou a{
     color: white;
 }
 /*滑动门start*/
 header .huamen{
     display: block;
     position: absolute;
     bottom: 8px;
     left: 0;
     width: 28px;
     height: 6px;
     background-color: red;
     transition: all 0.5s;
 }
 /*滑动门end*/
 
 /*屏幕区*/
 .fullpage .section{
 
 }
 /*第一屏*/
 .fullpage .section:nth-child(1){
     font-size: 36px;
     text-align: center;
     position: relative;
 }
 .fullpage .section:nth-child(1) p:nth-of-type(1){
     width:530px;
     height: 70px;
     line-height: 70px;
     color: coral;
     font-weight: 700;
     position: absolute;
     left: 50%;
     margin-left: -265px;
     top: 150px;
     opacity: 0;
     transform: translate(0,100px);
 }
 .fullpage .section:nth-child(1) div{
     width: 590px;
     height: auto;
     position: absolute;
     top: 270px;
     left: 50%;
     margin-left: -295px;
     opacity: 0;
     transform: translate(0,-100px);
 }
 .fullpage .section:nth-child(1) div img{
     display: inline-block;
     width: 100%;
     height: auto;
 }
 .fullpage .section:nth-child(1) p:nth-of-type(2){
     width: 600px;
     height: 50px;
     line-height: 50px;
     color: black;
     background-color: lightcoral;
     position: absolute;
     bottom: 70px;
     left: 50%;
     margin-left: -300px;
     opacity: 0;
     transform: translate(100px,0);
 }
 .fullpage .section:nth-child(1).current p:nth-of-type(1),.fullpage .section:nth-child(1).current p:nth-of-type(2),.fullpage .section:nth-child(1).current div{
     transition: all 1s .2s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第一屏end*/
 
 /*第二屏start*/
 .fullpage .section:nth-child(2){
     text-align: center;
     position: relative;
 }
 .fullpage .section:nth-child(2) p:nth-of-type(1){
     width: 318px;
     height: 100px;
     line-height: 50px;
     font-weight: 700;
     font-size: 36px;
     position: absolute;
     top: 140px;
     left: 50%;
     margin-left: -165px;
     opacity: 0;
     transform: translate(0,100px);
 }
 .fullpage .section:nth-child(2) p:nth-of-type(2){
     width: 580px;
     height: 52px;
     line-height: 26px;
     position: absolute;
     top: 280px;
     left: 50%;
     margin-left: -287px;
     opacity: 0;
     transform: translate(0,-100px);
 }
 .fullpage .section:nth-child(2) div{
     width: 600px;
     height: 1000px;
     position: absolute;
     top: 380px;
     left: 50%;
     margin-left: -300px;
     background: url("./fullimg/img1/infor-2.jpg") no-repeat;
     background-size: 1300px auto;
     background-position: center -200px;
     opacity: 0;
     transform: translate(0,260px);
 }
 .fullpage .section:nth-child(2) div span{
     width: 224px;
     height: 24px;
     line-height: 24px;
     position: absolute;
     font-size: 18px;
     opacity: 0;
 }
 .fullpage .section:nth-child(2) div span:nth-child(1){
     background: url("fullimg/img1/jianr.png") no-repeat;
     background-position: 116px center;
     text-align: left;
     top: 76px;
     left: -62px;
     transform: translate(-150px,0);
 }
 .fullpage .section:nth-child(2) div span:nth-child(2),.fullpage .section:nth-child(2) div span:nth-child(3){
     background: url("fullimg/img1/jianleft.png") no-repeat;
     background-position: 0 center;
     text-align: right;
     transform: translate(150px,0);
 }
 .fullpage .section:nth-child(2) div span:nth-child(2){
     top: 36px;
     right: -10px;
 }
 .fullpage .section:nth-child(2) div span:nth-child(3){
     top: 168px;
     right: -50px;
 }
 .fullpage .section:nth-child(2) div span::before,.fullpage .section:nth-child(2) div span::after{
     display: block;
     position: absolute;
     top: 0;
     content: "";
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background-color: blue;
     opacity: 0;
     transform: scale(0);
 }
 .fullpage .section:nth-child(2) div span:nth-child(1)::before,.fullpage .section:nth-child(2) div span:nth-child(1)::after{
     right: 0;
 }
 .fullpage .section:nth-child(2) div span:nth-child(2)::before,.fullpage .section:nth-child(2) div span:nth-child(2)::after,.fullpage .section:nth-child(2) div span:nth-child(3)::before,.fullpage .section:nth-child(2) div span:nth-child(3)::after{
     left: 0;
 }
 /*运动帧*/
 @keyframes twinkle{
     0%,100%{
         opacity: 0;
         transform: scale(0);
     }
     50%{
         opacity: 0.6;
         transform: scale(1);
     }
 }
 /*添加current类名后的目标值*/
 .fullpage .section:nth-child(2).current p:nth-of-type(1),.fullpage .section:nth-child(2).current p:nth-of-type(2),.fullpage .section:nth-child(2).current div{
     transition: all 1s .2s;
     opacity: 1;
     transform: translate(0,0);
 }
 .fullpage .section:nth-child(2).current div span{
     transition: all 1s 1.2s;
     opacity: 1;
     transform: translate(0,0);
 }
 .fullpage .section:nth-child(2).current div span::before,.fullpage .section:nth-child(2).current div span::after{
     animation: twinkle 2s 2.2s infinite;
 }
 .fullpage .section:nth-child(2).current div span::after{
     animation-delay: 3.2s;
 }
 /*第二屏end*/
 
 /*第三屏start*/
 .fullpage .section:nth-child(3){
 
 }
 /*第三屏第一分屏*/
 .fullpage .section:nth-child(3) .slide:nth-child(1){
     color: white;
     position: relative;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > p:nth-of-type(1){
     width: 340px;
     height: 40px;
     line-height: 40px;
     font-size: 30px;
     text-align: left;
     position: absolute;
     top: 48px;
     left: 100px;
     opacity: 0;
     transform: translateY(50px);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > p:nth-of-type(2){
     width: 600px;
     height: 50px;
     line-height: 25px;
     text-align: left;
     position: absolute;
     top: 120px;
     left: 100px;
     opacity: 0;
     transform: translateY(-50px);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul{
     width: 240px;
     height: 240px;
     font-size: 14px;
     text-align: center;
     position: absolute;
     top: 260px;
     left: 100px;
     opacity: 0;
     transform-origin: center;
     transform: scale(0);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li{
     width: 112px;
     height: 112px;
     border: 1px solid white;
     box-sizing: border-box;
     float: left;
     border-radius: 4px;
     transition: all 1s;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li:nth-child(1),.fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li:nth-child(2){
     margin-bottom: 16px;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li:nth-child(2n){
     margin-left: 16px;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li > p:nth-child(1){
     margin: 32px auto 14px auto;
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) > ul > li:hover{
     transform: scale(1.1);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) div{
     width: 500px;
     height: 320px;
     position: absolute;
     top: 120px;
     left: 50%;
     opacity: 0;
     transform: translateX(700px);
 }
 .fullpage .section:nth-child(3) .slide:nth-child(1) div img{
     width: 100%;
     height: 100%;
 }
 /*添加类名curent后的终点位置*/
 .fullpage .section:nth-child(3).current .slide:nth-child(1) > p:nth-of-type(1),.fullpage .section:nth-child(3).current .slide:nth-child(1) > p:nth-of-type(2),.fullpage .section:nth-child(3).current .slide:nth-child(1) > ul,.fullpage .section:nth-child(3).current .slide:nth-child(1) > div{
     transition: all 2s;
     opacity: 1;
     transform: scale(1) translate(0,0);
 }
 /*设置左右按钮，覆盖原样式*/
 .fp-controlArrow.fp-prev{
     left: 20px;
     border-width: 40px 30px 40px 0;
     border-color: transparent lightseagreen transparent transparent;
 }
 .fp-controlArrow.fp-next{
     right: 50px;
     border-width: 40px 0 40px 30px;
     border-color: transparent transparent transparent lightseagreen;
 }
 /*第三屏第二分屏*/
 .fullpage .section:nth-child(3) .slide:nth-child(2){
     color: white;
     text-align: center;
     font-size: 30px;
     line-height: 540px;
 }
 /*第三屏end*/
 
 /*第四屏start*/
 .fullpage .section:nth-child(4){
     background: url("./fullimg/2.jpg") no-repeat;
     background-size: cover;
 }
 /*第四屏end*/
 
 /*第五屏start*/
 .fullpage .section:nth-child(5){
     color: black;
     text-align: center;
     position: relative;
     overflow: hidden;
 }
 .fullpage .section:nth-child(5) > p:nth-of-type(1){
     width: 100%;
     height: 34px;
     line-height: 34px;
     position: absolute;
     top: 134px;
     left: 0;
     font-size: 34px;
     font-weight: 700;
     opacity: 0;
     transform: translateY(100px);
 }
 .fullpage .section:nth-child(5) > p:nth-of-type(2){
     width: 100%;
     height: 20px;
     line-height: 20px;
     position: absolute;
     top: 240px;
     left: 0;
     opacity: 0;
     transform: translateY(-50px);
 }
 .fullpage .section:nth-child(5) > div{
     width: 1000px;
     height: 575px;
     position: absolute;
     top: 370px;
     left: 50%;
     margin-left: -500px;
     overflow: hidden;
     opacity: 0;
     transform: translateY(260px);
 }
 .fullpage .section:nth-child(5) > div > img{
     width: 100%;
     height: 100%;
     margin-top: -50px;
 }
 /*添加current类名*/
 .fullpage .section:nth-child(5).current > p:nth-of-type(1),.fullpage .section:nth-child(5).current > p:nth-of-type(2),.fullpage .section:nth-child(5).current > div{
     transition: all 1s;
     opacity: 1;
     transform: translate(0,0);
 }
 /*第五屏end*/
 /*底部区start*/
 .fullpage .fp-auto-height footer{
     width: 100%;
     height: 150px;
     line-height: 150px;
     text-align: center;
     font-size: 40px;
     color: orange;
     background-color: lightslategray;
 }
 /*底部区end*/
 
 /*右侧导航区start*/
 #fp-nav ul li:nth-child(6), .fp-slidesNav ul li:nth-child(6){
     display: none;
 }
 #fp-nav ul li .fp-tooltip{
     color: blue;
 }
 #fp-nav ul li a span, .fp-slidesNav ul li a span{
     background: red;
 }

第十二周第一天笔记之fullpage全屏页面滚动实例

fullPage运动的实例

实例完整版代码

fullPage插件实例复习版

猜你喜欢

热点阅读