<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<meta?name="viewport?content="width=device-width,initial-scall=1,user-scalable=no">
<title>fullPage.js?—?基本演示_dowebok</title>
<link?rel="stylesheet"?>
<style>
.section?{?text-align:?center;?font:?50px?"Microsoft?Yahei";?color:black;}
.section1{background:url("images/未標題-1.jpg")no-repeat?center;}
.section2{background:url("images/未標題-2.jpg")no-repeat?center;}
.section3{background:url("images/未標題-3.jpg")no-repeat?center;}
.section4{background:url("images/未標題-4.jpg")no-repeat?center;}
</style>
<script?src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script?src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script?src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
$('#fullage').fullpage({
vercticalCentered:false,
anchors:['page1','page2','page3','page4'],
sectionsColor:?['#1bbc9b',?'#4BBFC3',?'#7BAABE',?'#f90'],
afterLoad:?function(link,index){
switch(index){
case?1:
move(".section1?h3").scale(3).end();
break;
case?2:
break;
case?3:
break;
case?4:
break;
default:
break;
}
}
});
});
</script>
</head>
<body>
<script?src="https://cdnjs.cloudflare.com/ajax/libs/move.js/0.5.0/move.js"?></script>
<div?id="fullage">
<div?class="section?section1">
<h3>第一屏</h3>
<p>fullPage.js?—?基本演示</p>
</div>
<div?class="section?section2">
<div><h3>第二屏的第一屏</h3></div>
<div><h3>第二屏的第二屏</h3></div>
<div><h3>第二屏的第三屏</h3></div>
</div>
<div?class="section?section3">
<h3>第三屏</h3>
</div>
<div?class="section?section4">
<h3>第四屏</h3>
<p>這是最后一屏</p>
</div>
</div>
</body>
</html>
想要改變h3?第一屏的縮放?發(fā)現(xiàn)縮放是縮放了?但是沒有動畫效果??求問怎么回事？
