关于continuousVertical的问题；
$(document).ready(function(){
$("#fullpage").fullpage({
sectionsColor:['lightblue','#6495ED','#3CB371','#D2691E'],//给每个div添加背景颜色；
// navigation:true,//添加圆点
verticalCentered:true, //加上这句，配置错乱问题就不会乱了。
// navigationPosition:'right',
loopBottom: true,
continuousVertical:true,
// scrollingSpeed:800,
// continuousHorizontal:true,
// easing:'easeInOutCubic',
anchors:['first', 'scend','three','four'],
menu:"#menu",
afterLoad:function(anchorlink,index){
console.log(111);
//进入任何页面的时候就触发 afterLoad()函数;
//从无到有的动画效果，开始必须是无，到有, 第一次是无，变为了有；
//第二次进入此页面时候，有到有，无动画
if(index == 1){
$('.section1').find('h2').fadeIn();
$('.section1').find('p').delay(500).fadeIn();
}else if(index == 2){
$('.section2').find('h2').fadeIn();
$('.section2').find('img').animate({left:'3rem',opacity:'1'},1000);
}else if(index == 3){
$('.section3').find('h2').fadeIn();
$('.section3').find('img').animate({bottom:'3rem',opacity:'1'},1000);
}else if(index == 4){
$('.section4').find('h2').fadeIn();
$('.section4').find('img').delay(500).fadeIn();
}
},
onLeave:function(index,direction){
//离开任何页面的时候就触发 onLeave()函数;
//把第一个页面状态重置为无
console.log(222);
if(index == 1){
$('.section1').find('h2').fadeOut();
$('.section1').find('p').fadeOut();
}else if(index == 2){
$('.section2').find('h2').fadeOut();
$('.section2').find('img').css({left:'-2rem',opacity:'0'});
}else if(index == 3){
$('.section3').find('h2').fadeOut();
$('.section3').find('img').css({bottom:'-4rem',opacity:'0'});
}else if(index == 4){
$('.section4').find('h2').fadeOut();
$('.section4').find('img').fadeOut();
}
}
})
});
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
.section{
text-align:center;
color:#fff;
}
.section1 h2,
.section1 p,
.section2 h2,
/*.section2 img,*/
.section3 h2,
/*.section3 img,*/
.section4 h2,
.section4 img
{display:none;}
.section4 h2,
.section3 h2,
.section2 h2,
.section1 h2
{
position:absolute;
top:5rem;
width:100%;
font-size:.5rem;
}
.section1 p{
position:absolute;
top:6rem;
width:100%;
font-size:.4rem;
}
.section2 img{
position:absolute;
top:6rem;
left:-2rem;
width:1.35rem;
height:3.7rem;
opacity:0;
}
.section3 img{
position:absolute;
bottom:-4rem;
left:3rem;
width:1.35rem;
height:3.7rem;
opacity:0;
}
.section4 img{
position:absolute;
width:1.35rem;
height:3.7rem;
top:6rem;
left:3rem;
}
#menu{
position:absolute;
left:0;
top:0;
width:100%;
text-align:center;
display:flex;
justify-content:space-around;
align-items:center;
margin-top:.05rem
}
#menu li{
display:inline-block;
width:1.5rem;
height:.5rem;
line-height:.5rem;
background:rgba(255,255,255,0.5);
border-radius:.2rem;
-webkit-border-radius:.2rem;
font-size:0;
}
#menu li a{
display:block;
text-align:center;
font-size:.12rem;
color:orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="./css/jquery.fullpage.min.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.easings.min.js"></script>
<script src="./js/jquery.fullpage.min.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div id="fullpage">
<div class="section section1">
<h2>第一屏</h2>
<p>动画效果演示</p>
</div>
<div class="section section2">
<h2>第二屏</h2>
<img src="./img/model-1.png" alt="">
</div>
<div class="section section3">
<h2>第三屏</h2>
<img src="./img/model-2.png" alt="">
</div>
<div class="section section4">
<h2>第四屏</h2>
<img src="./img/model-3.png" alt="">
</div>
</div>
<ul id="menu">
<li class="first"><a href="#first">第一页</a></li>
<li class="scend"><a href="#scend">第二页</a></li>
<li class="three"><a href="#three">第三页</a></li>
<li class="four"><a href="#four">第四页</a></li>
</ul>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，如下，主要是loopBottom这个产生了影响，这个去掉即可，
同学有兴趣也可以了解下，这些属性参数，https://github.com/alvarotrigo/fullPage.js#options
希望能帮助到你，祝学习愉快！
// rem 响应式布局公式
(function(doc,win){
let docEl = doc.documentElement;
let resizeEt = 'orientationchange' in window? 'orientationchange':'resize';
let recalc = function(){
let clientWidth = docEl.clientWidth;
if(!clientWidth) return;
if(clientWidth>=750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if(!doc.addEventListener) return ;
win.addEventListener(resizeEt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
recalc();
})(document,window);
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星