<!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" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.css">
<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 第一屏的缩放 发现缩放是缩放了 但是没有动画效果 求问怎么回事？
