第十一周第五天笔记之fullpage全屏页面滚动插件
作者:
果木山 | 来源:发表于
2018-10-13 20:46 被阅读0次
fullpage全屏页面滚动插件
- 链接解读
- fullpage中遇到的问题
- 吸顶的顶部通栏问题：
- header标签写在fullpage容器外面；
- 添加固定定位；
- 底部导航的问题：
- footer必须写在fullpage里面，必须给它父级的section加上
.fp-auto-heightclass名；高度要加在footer里面；
<div class="section fp-auto-height">
<footer>
dfjiefheifehifehfe
</footer>
</div>
- 背景无法填充容器
- 添加代码：
background-size:cover/100% 100%;
- 内容被顶部分栏覆盖
- 在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设置；
- 代码：
<!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>
/*重置样式*/
*{
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全屏页面滚动插件
本文链接：https://www.haomeiwen.com/subject/wjlaaftx.html
网友评论