第十一周第五天笔记之fullpage全屏页面滚动插件

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

fullpage全屏页面滚动插件

链接解读
- 链接地址：fullpage基础知识解读
fullpage中遇到的问题
1. 吸顶的顶部通栏问题：
  - header标签写在fullpage容器外面；
  - 添加固定定位；
2. 底部导航的问题：
  - footer必须写在fullpage里面，必须给它父级的section加上.fp-auto-heightclass名；高度要加在footer里面；
```
 <div class="section fp-auto-height">
     <footer>
         dfjiefheifehifehfe
     </footer>
 </div>
```
3. 背景无法填充容器
  - 添加代码：background-size:cover/100% 100%;
4. 内容被顶部分栏覆盖
  - 在fullpage参数对象中，添加paddingTop:"100px";引发的问题是所有屏均设置了顶部间距，在footer的section中也设置了顶部边距；
  - 解决footer的section中设置顶部边距的问题：
    - 先在css的数据中设置footer的section中的padding-top值为0；发现无法设置；则判断是通过JS来设置的；
    - 要在JS中设置顶部边距；删除fullpage参数对象中，添加的paddingTop:"100px"；for循环设置前五个的paddingTop值；
```
 for(var i=0; i<5; i++){
     $(".section").eq(i).css({
         paddingTop: "100px"
     })
 }
```
知识点：
- css为层叠样式表，所以需要先引入fullpage.css文件，再引入index.css文件，这样在index.css中设置新的样式，会覆盖fullpage.css中设置的css样式；
- JS文件需要先引入fullpage.js文件，再在下面设置js设置，这样也会覆盖原有的js设置；

代码：

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"><a href="#sixthPage">立即购买</a></li>
     </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">33333</div>
     <div class="section">44444</div>
     <div class="section">55555</div>
     <div class="section fp-auto-height">
         <footer>
             dfjiefheifehifehfe
         </footer>
     </div>
 </div>
 <script src="JS/jquery.js"></script>
 <script src="JS/fullpage.js"></script>
 <script>
     $("#fullPage").fullpage({
         licenseKey:"OPEN-SOURCE-GPLV3-LICENSE",
         //文本是否垂直居中；
         verticalCentered: false,
         css3: true,
         //滚动到某一屏后的回调函数
         afterLoad: function (anchorLink, sec) {
             //通过index值来设置某一屏
             $(".section").removeClass("current");
             setTimeout(function () {
                 $(".section").eq(sec.index).addClass("current");
             },200)
         },
         //右侧导航
         navigation: true,
         navigationPosition:"right",
         navigationTooltips:["首页","外观","配置","型号","说明"],
         menu: true,
         anchors: ["firstPage","secondPage","thirdPage","fourthPage","fifthPage"]
     });
     //通过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{
     width: 100%;
     height: 80px;
     line-height: 80px;
     position: fixed;
     left: 0;
     top: 0;
     z-index: 99;
     background-color: lavender;
 }
 .section:nth-child(1){
     background-color: lightslategrey;
     position: relative;
 }
 .section:nth-child(2){
     background-color: #f7f7f7;
     position: relative;
 }
 .section:nth-child(3){
     background: url("../img/index3.jpg") no-repeat;
     background-size: cover;
 }
 .section:nth-child(4){
     background: url("../img/1.jpg") no-repeat;
     background-size: cover;
 }
 .section:nth-child(5){
     background: url("../img/2.jpg") no-repeat;
     background-size: cover;
 }
 .section:nth-child(6){
 }
 /*底部设置*/
 .section:nth-child(6) footer{
     background-color: pink;
     height: 300px;
 }

第十一周第五天笔记之fullpage全屏页面滚动插件

fullpage全屏页面滚动插件

猜你喜欢

热点阅读