2019独角兽企业重金招聘Python工程师标准>>> 
js代码：
$(function(){
//1.fullpage
$(".main").fullpage({
sectionsColor:["#1bbc9b","#1bbc9b","#1bbc9b","#1bbc9b"]
});
//2.背景音频播放
var audiobox=document.getElementById('audiobox');
var audio=document.getElementById("audio");
audiobox.οnclick=function(){
if(audio.paused){
audio.play();
}else{
audio.pause();
}
}
})
css代码:
*{
margin: 0;
padding: 0;
}
#audiobox{
width: 50px;
height: 50px;
position: absolute;
top: 5%;
right: 3%;
border-radius: 25%;
background: url("../img/music.png") no-repeat center;
cursor: pointer;
}
.section{
overflow: hidden;
}
/*第一页*/
.page1 img{
width: 50%;
margin-left: 30%;
}
/*所有页的图片list，距离左侧的距离设置一下*/
[class*='page'] .list{
margin-left: 5%;
}
/*所有列表页面的图片大小*/
[class*='page'] .list img{
width: 240px;
height: 285px;
border: 5px solid black;
}
/*所有页面的背景图片 bg*/
[class*='page'] .bg{
position: absolute;
bottom: 5%;
right:5%;
width: 30%;
}
[class*='page'] .text{
position: absolute;
top: 5%;
right: 5%;
}
/*第一页的动画*/
/*核心思路；通过opacity属性和transition配合实现.opacity(透明度)，transition是检测某一属性的变化*/
.page1 img{
opacity:0 ;/*初始状态 隐藏*/
transition: 1s 0.5s;
/* transition: opacity 1s 0.5s; */
}
/*当第一页要显示的时候去触发，怎么知道第一页要显示呢?*/
.page1.active img{
opacity: 1;
}
/*第二页效果*/
/*核心思路:通过transform：translateY()和translation配合实现
translation:是检测属性值变化
translateY 平移
*/
.page2 .list img{
transition: 1s;
/*先让图片都跑到页面下面去*/
transform: translateY(1000px);
}
.page2 .list img:nth-child(1){
transition-delay: 0.5s;
}
.page2 .list img:nth-child(2){
transition-delay: 0.7s;
}
.page2 .list img:nth-child(3){
transition-delay: 0.9s;
}
/*检测第二页要触发*/
.page2.active .list img{
transform: translateY(0);
}
/*第三页的动画效果*/
/*核心效果：通过transform:translateX()和transtion配合实现*/
.page3 .list img{
transition: 1s 0.5s;
}
/*让后两张叠到左边*/
.page3 .list img:nth-child(2){
transform: translateX(-260px);
}
.page3 .list img:nth-child(3){
transform: translateX(-520px);
}
/*当第三页被触发，就让所有图片归位*/
.page3.active .list img{
transform: translateX(0);
}
/*第四页动画*/
/*核心思路：通过transform：translateX()和keyframe*/
.page4 .list img{
position: relative;
}
.page4 .list img:nth-child(1){
transform:translateX(260px);
}
.page4 .list img:nth-child(3){
transform:translateX(-260px);
}
/*当页面触发时归位*/
@keyframes move1{
from{
left: 0px;
}
to{
left: -260px;
}
}
@keyframes move2{
from{
left:0px;
}
to{
left: 260px;
}
}
.page4.active .list img:nth-child(1){
animation: move1 1s;
animation-fill-mode:forwards;
}
.page4.active .list img:nth-child(3){
animation: move2 1s;
animation-fill-mode:forwards;
}
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="main">
<div class="section page1">
<img src="img/fullpage_1.png" class="" />
</div>
<div class="section page2">
<!--有动画效果的3个图片放在一组-->
<div class="list">
<img src="img/fullpage_2_1.png"/>
<img src="img/fullpage_2_2.png"/>
<img src="img/fullpage_2_3.png"/>
</div>
<!--没有动画效果的放在一组-->
<img src="img/fullpage_2_4.png" class="text"/>
<img src="img/fullpage_2_5.png" class="bg"/>
</div>
<div class="section page3">
<!--有动画效果的3个图片放在一组-->
<div class="list">
<img src="img/fullpage_3_1.png"/>
<img src="img/fullpage_3_2.png"/>
<img src="img/fullpage_3_3.png"/>
</div>
<!--没有动画效果的放在一组-->
<img src="img/fullpage_3_4.png" class="text"/>
<img src="img/fullpage_3_5.png" class="bg"/>
</div>
<div class="section page4">
<!--有动画效果的3个图片放在一组-->
<div class="list">
<img src="img/fullpage_4_1.png"/>
<img src="img/fullpage_4_2.png"/>
<img src="img/fullpage_4_3.png"/>
</div>
<!--没有动画效果的放在一组-->
<img src="img/fullpage_4_4.png" class="text"/>
<img src="img/fullpage_4_5.png" class="bg"/>
</div>
</div>
<!--背景音乐控制按钮-->
<div id="audiobox">
<audio id="audio" loop src="music/MP4-城市猎人.mp3"></audio>
</div>
</body>
</html>
