动画——move.js插件实现
move.js是一个极小的javascript库，它支持css3的动画效果，而且不需要写css代码，只需要简单的js代码就可以实现。move.js提供了创建css3动画的最简单的javascript的API。
fullpage.jpg
一、Move.js的方法
1、set()方法
用于设置元素的css属性，它带有两个参数：css属性和属性值。
2、scale()方法
用于放大或缩小元素的大小，按照提供的每一个值，将调用transform的scale方法。
3、rotate(deg)方法
通过提供的数值作为参数来旋转元素。当方法被调用的时候通过附加到元素的transform属性上。
4、end()方法
用于move.js代码片段的结束。它标识动画的结束。技术上该方法触发动画的播放，该方法接受一个可选的callback回调函数。
二、小实例（Apple watch全屏展示）
效果图如下：
第一页.jpg
第二页.jpg
第三页.jpg
第四页.jpg
示例代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>Apple Watch宣传页</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="fullpage">
<div class="section section1">
<h1>它，终于来了。。。</h1>
<p>
为了充分发挥体积小以及佩戴手腕的优势，Apple Watch带来全新的科技和互动方式。它可以让你更快捷地完成一些早已习惯的事，也可以实现过去根本无法企及的新功能。因此，这将会是焕然一新的全新体验，也将实现与你前所未有的贴近。
</p>
<a href="#">进一步了解</a>
</div>
<div class="section section2">
<h1>真正与你贴近的个人设备</h1>
<a href="#">进一步了解</a>
</div>
<div class="section section3">
<h1>非同一般的精准计时</h1>
<p>高级手表向来以精准计时为本，Apple Watch更是如此。它与你的iphone配合使用，同全球标准时间的误差不超过50毫秒。而且，你可以对表盘进行个性化设定，以更具个性和意义的方式显示时间，使其更贴近你的生活和日程需要。</p>
<a href="#">进一步了解</a>
</div>
<div class="section section4">
<h1>在三个特点鲜明的系列中找到你的风格</h1>
<div class="row">
<div class="column">
<img src="img/primary_large_2x.jpg" class="primary">
<h4 class="primary"></h4>
<div class="intro">
<p>不锈钢或者深空黑色不锈钢表壳，蓝宝石水晶镜面，搭配多款时尚表带。</p>
<a href="#" class="more">了解更多</a>
</div>
</div>
<div class="column">
<img src="img/sport_large_2x.jpg" class="sport">
<h4 class="sport"></h4>
<div class="intro">
<p>银色或者深空灰色的阳极氧化铝金属表壳，强化Ion-X玻璃，搭配亮丽柔韧的表带。</p>
<a href="#" class="more">了解更多</a>
</div>
</div>
<div class="column">
<img src="img/edition_large_2x.jpg" class="edition">
<h4 class="edition"></h4>
<div class="intro">
<p>18K 黄金或者玫瑰金表壳，蓝宝石水晶镜面，搭配精雕细琢的表带及表扣。</p>
<a href="#" class="more">了解更多</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
<!--引入move.js的插件-->
<script src="https://cdn.bootcss.com/move.js/0.5.0/move.min.js"></script>
<!--激活fullpage效果-->
<script>
$(function(){
$('#fullpage').fullpage({
verticalCentered:false,
anchors:['page1','page2','page3','page4'],
navigation:true,
navigationTooltips:['它，终于来了。。。','真正与你贴近的个人设备','非同一般的精准计时','在三个特点鲜明的系列中找到你的风格'],
afterLoad:function(link,index){
switch(index){
case 1:
move('.section1 h1').scale(1.5).end();
move('.section1 p').set('margin-top','5%').end();
break;
case 2:
move('.section2 h1').scale(0.7).end();
break;
case 3:
move('.section3 h1').set('margin-left','20%').end();
move('.section3 p').set('margin-left','20%').end();
break;
//三个图片依次旋转360度然后再标志一次放大（回调函数嵌套）
case 4:
move('.section4 img.primary').rotate(360).end(function(){
move('.section4 img.sport').rotate(360).end(function(){
move('.section4 img.edition').rotate(360).end(function(){
move('.section4 h4.primary').scale(1.3).end(function(){
move('.section4 h4.sport').scale(1.3).end(function(){
move('.section4 h4.edition').scale(1.3).end();
});
});
});
});
});
break;
default:
break;
}
},
//在离开页面时，页面的动画效果还原.等再次滚动页面时就会出现动画
onLeave:function(link,index){
switch(index){
case 1:
move('.section1 h1').scale(1).end();
move('.section1 p').set('margin-top','800px').end();
break;
case 2:
move('.section2 h1').scale(1).end();
break;
case 3:
move('.section3 h1').set('margin-left','-1500px').end();
move('.section3 p').set('margin-left','1500px').end();
break;
case 4:
move('.section4 img.primary').rotate(-360).end();
move('.section4 img.sport').rotate(-360).end();
move('.section4 img.edition').rotate(-360).end();
move('.section4 h4.primary').scale(1).end();
move('.section4 h4.sport').scale(1).end();
move('.section4 h4.edition').scale(1).end();
break;
default:
break;
}
},
});
});
</script>
</body>
</html>
