为什么我按照老师的方法把代码写完后，刷新页面第一屏没有动画效果，要滚动到第二屏后，在重新滚动到第一屏才看的到动画效果，这是为什么？求解答
这是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<title>数据</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<!-- 初始化 -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="fullpage">
<!-- 信息 -->
<div class="section section1">
<h3>第一屏</h3>
<p>数据</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>
<script src="jquery/jquery-3.1.1.min.js"></script>
<script src="jquery/jquery.fullPage.min.js"></script>
<script src="jquery/jquery.easing.min.js"></script>
<script src="jquery/move.js"></script>
<!-- 这是自己写的，我是引用外部文件-->
<script src="js/jqfullpage.js"></script>
<!-- jqfullpage.js里面是这么写的 -->
$(document).ready(function(){
$(function(){
$('#fullpage').fullpage({
verticalCentered: false,
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
navigation:true,
afterLoad:function(Link,index){
switch(index){
case 0:
break;
case 1:
move('.section1 h3').scale(1.5).end();
move('.section1 p').x(300).end();
break;
case 2:
move('.section2 h3').scale(1.5).end();
move('.section2 p').x(100).end();
break;
default:
break;
}
},
onLeave:function(Link,index){
switch(Link){
case 0:
break;
case 1:
move('.section1 h3').scale(.5).end();
move('.section1 p').x(0).end();
break;
case 2:
move('.section2 h3').scale(1).end();
move('.section2 p').x(0).end();
break;
default:
break;
}
},
// afterRender:function(){
// },
});
});
});
</body>
</html>
页面刷新后，第一屏没动画
HeyShinner
相关分类