首先说一下fullpage，它是一个jquery的插件，用来实现鼠标向上向下滑动，就会自动切换到上一屏或者下一屏，对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。
总共有四屏的内容
第一屏是用一个图片，其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。
这三屏左侧的图片展开方式不同，所以就更有炫酷的效果。 第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置。 第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置。 第四屏的三个图片是当页面显示时从中间到两边展开到正确的位置。
<div class="jb51code">
<pre class="brush:xhtml;">
<div class = "main">
<div class="section page1">
<img src="./images/page1.png">
<div class="section page4">
<div class = "list">
<img src = "./images/page4_1.png">
<img src = "./images/page4_2.png">
<img src = "./images/page4_3.png">
</div>
<img class = "text" src = "./images/page4_4.png">
<img class = "bg" src = "./images/page4_5.png">//2.控制音频的播放
var au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a><a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> = document.getElementById('au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a><a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>');
var au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a> = document.getElementById("au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>");
au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a><a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.onclick = function(){
if(au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>.paused){
au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>.play();
}
else
{
au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>.pause();
}}
<div class = "main">
<div class="section page1">
<img src="./images/page1.png">
<img class = "text" src = "./images/page2_4.png">
<img class = "bg" src = "./images/page2_5.png"><div class="section page4">
<div class = "list">
<img src = "./images/page4_1.png">
<img src = "./images/page4_2.png">
<img src = "./images/page4_3.png">
</div>
<img class = "text" src = "./images/page4_4.png">
<img class = "bg" src = "./images/page4_5.png">