老师,这fullpage,是不是只有购买了之后才会有动画效果

自己在fullpage的github上弄的源代码.动画不起效果......用这边给的源代码就行了

慕无忌6236884 2018-11-14

源自：全屏滚动插件 fullPage.js 3-3 fullpage下第一屏实现(下)

收起

3回答

好帮手慕糖 2018-11-14 11:05:15

同学你好，慕课网提供的课程代码，都是经过老师精心准备的，是不会有问题的。github是一个代码分享的平台，很多开发者会分享一些效果。因为你粘贴的代码不完整，又缺少的文件，所以没有办法进行测试，但是老师大概帮你看了一下代码，跟咱们课程中老师讲的效果差不多，你可以直接学习咱们的课程，看看咱们的源码。

关于GitHub上的代码，如果还有具体的问题，可以请教一下发布者，因为运行不出效果时，老师也无法猜测当时发布者的具体需求，尤其是分享的代码有错误时，更是无法了解具体的需求是什么样子的。

如果帮助到了你，欢迎采纳！

祝学习愉快！

收起回答

提问者慕无忌6236884 2018-11-14 10:43:36

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/fullpage.min.css" />
<!-- <link rel="stylesheet" href="css/work.css"> -->
<style>
body{
    font-family: PingFang-SC-Regular,Helvetica Neue,Helvetica,Droid Sans Fallback,microsoft yahei,sans-serif;
}
.section{
text-align: center;
}
.section1 h2,.section1 .section1_p1,.section1 .section1_p2,.section1 .section1_div1,.section1 .section1_div2,.section1 .section1_div3{
    display: none;
}
.section h2{
position: absolute;
top: 3.3rem;
width: 100%;
font-size: 0.36rem;
}
.section .section1_p1{
position: absolute;
width: 100%;
top: 4.07rem;
font-size: .24rem;
}
.section .section1_p2{
position: absolute;
width: 100%;
top: 4.54rem;
font-size: .24rem;
}
.section1_div1{
top: 6.4rem;
position: absolute;
width: 7.2rem;
height: 3.6rem;
background: url(../img/page1_1.png) no-repeat top center;
background-size: 100%;

}
.section1_div2{
position: absolute;
top: 6rem;
left: 2.1rem;
width: 2.75rem;
height: 3.8rem;
background: url(../img/page1_2.png) no-repeat top center;
background-size: 100%;
z-index: 3;
}
.section1_div3{
position: absolute;
top: 5.85rem;
left: 3.07rem;
width: 2.66rem;
height: 2.5rem;
background: url(../img/page1_3.png) no-repeat top center;
background-size: 100%;
}

</style>
</head>
<body>

<div id="fullpage">
<div class="section section1">
<h2>每门课都是真实的</h2>
<p class="section1_p1">真实案例，真实场景，在实战中实践、操作、调试</p>
<p class="section1_p2">大牛带你体验BAT真实开发流程，所有开发为你呈现</p>
<div class="section1_div1"></div>
<div class="section1_div2"></div>
<div class="section1_div3"></div>
</div>
<div class="section section2">
<!-- 
                        1、通过设计稿把结构搭建起来
                        2、实现滑动重置动画效果
                     -->
<h2>强大的语言课程体系支持</h2>
<p class="section2_p1">学习环境与课程轻松对接，安装、调试、写入</p>
<p class="section2_p2">让你体验开发全流程</p>
<div></div>
</div>
<div class="section section3">
<h2>省去本地复杂的环境搭建</h2>
<p>你可以告别在虚拟机中调试开发了</p>
<div></div>
</div>
<div class="section section4">
<div></div>
<h2>强大的语言课程体系支持</h2>
<p>结合慕课网为你提供的云端学习工具，所见即所得</p>
</div>
</div>
<ul id="myMenu">
<li data-menuanchor="yi" class="active"><a href="#yi">第一节</a></li>
<li data-menuanchor="er"><a href="#er">第二节</a></li>
<li data-menuanchor="san"><a href="#san">第三节</a></li>
<li data-menuanchor="si"><a href="#si">第四节</a></li>
</ul>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    
<script src="js/jquery.easings.min.js"></script>
<script src="js/jquery.fullpage.js"></script>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var 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(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc();
})(document, window);
$(function () {
$('#fullpage').fullpage({
sectionsColor: ['#FFB6C1', '#6495ED', '#3CB371', '#D2691E'],
navigation: true,
//防止给div嵌套导致混软
verticalCentered: false,
// loopBottom:true,
// 重复滑动
continuousVertical: true,
// navigationPosition:'right',
//导航条位置
navigationPosition: 'right',
//速度
scrollingSpeed: 100,
//页数
anchors: ['yi', 'er', 'san', 'si'],
menu: '#myMenu',

afterLoad: function (anchorLink, index) {
// 进入任何页面的时候，就会调用afterload

// 从无到有的动画效果   开始必须是无，到有   第一次是无，变为了有
// 第二次进入此页面时候，无到有，无动画
if (index == 1) {
$('.section1').find('h2').fadeIn(); // display：无   display：有
$('.section1').find('.section1_p1').delay(500).fadeIn();
$('.section1').find('.section1_p2').delay(1000).fadeIn();
$('.section1').find('.section1_div1').delay(1500).fadeIn();
$('.section1').find('.section1_div2').delay(2000).fadeIn();
$('.section1').find('.section1_div3').delay(2500).fadeIn();
}
},
onLeave: function (index, direction) {
// 离开任何页面都会调用此函数
// 把第一个页面状态重置为无

if (index == 1) {
$('.section1').find('h2').fadeOut();
$('.section1').find('.section1_p1').fadeOut();
$('.section1').find('.section1_p2').fadeOut();
$('.section1').find('.section1_div1').fadeOut();
$('.section1').find('.section1_div2').fadeOut();
$('.section1').find('.section1_div3').fadeOut();
}
}
})
// navigation:true
})
</script>
</body>
</html>

老师能不能帮我看看我的navigationposition为什么不起效果

收起回答