您的位置：首页 > 移动开发

使用swiper实现移动端小场景

2017-08-21 10:05 239 查看

swiper是一个专业的轮播插件里面的方法易于学习，种类齐全，大部分直接加个类名就可以使用了，里面的animate方法更是实现了h5c3的一些功能效果。所以用swiper写移动端的h5界面和一些小场景真的非常好用，推荐使用（试看的时候加载过程可能比较慢，需耐心等待，另外代码中的图片全是在我本人的文件夹里。直接粘贴复制肯定是没有的，需要自己下载，试看时候好的体验需要把窗口调成适合手机的屏幕，全屏体验不好，缩小窗口体验更佳，具体样式效果代码编写见swiper官方文档）。

点击试看

index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<link rel="stylesheet" href="swiper.min.css">
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="reset.css">
<link rel
1ddc3
="stylesheet" href="index.css">
</head>
<body>

<div class="music">
<img src="cmbChina%20demo/images/musicBtn.png" alt="" class="musicImg">
<audio src="cmbChina%20demo/images/music.mp3" autoplay class="audio">
</audio>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide index-first">
<img src="cmbChina%20demo/images/indexTxt.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
<img src="cmbChina%20demo/images/indexFlowers01.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
<img src="cmbChina%20demo/images/indexFlowers02.png" alt="" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1s">
<div class="ani index-flight" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="1s">
<img src="cmbChina%20demo/images/indexFlight.png" alt="" class="ani infinite" id="flight" swiper-animate-effect="pulse" swiper-animate-duration="2s" swiper-animate-delay="0s">
</div>
<div class="ani index-star" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="0.7s">
<img src="cmbChina%20demo/images/indexStars.png" alt="" class="ani infinite" id="star" swiper-animate-effect="pulse" swiper-animate-duration="2s" swiper-animate-delay="0.8s">
</div>
<div class="ani index-cloud" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="0.9s">
<img src="cmbChina%20demo/images/indexCloud.png" alt="" class="ani infinite" id="cloud" swiper-animate-effect="pulse" swiper-animate-duration="2s" swiper-animate-delay="0.6s">
</div>
<div class="ani index-end" swiper-animate-effect="zoomInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
<img src="cmbChina%20demo/images/endBg.png" alt="" class="ani infinite" id="end" swiper-animate-effect="pulse" swiper-animate-duration="2s" swiper-animate-delay="0.6s">
</div>
<img src="cmbChina%20demo/images/indexBuilding.png" alt="" class="ani building"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
</div>
<div class="swiper-slide index-second">
<img src="cmbChina%20demo/images/wasBg.jpg" alt="" class="ani wasBg"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/wasIT.png" alt="" class="ani wasIT"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
<img src="cmbChina%20demo/images/wasFarm.png" alt="" class="ani wasFarm"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
<img src="cmbChina%20demo/images/wasStar.png" alt="" class="ani wasStar"  swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
<img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
</div>
<div class="swiper-slide  index-third">
<div class="ani index-earlyBg" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/earlyBg.jpg" alt="" class="ani earlyBg"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="7s">
</div>
<div class="ani index-earlyBuilding" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.8s">
<img src="cmbChina%20demo/images/earlyBuilding.png" alt="" class="ani earlyBuilding"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2.8s">
</div>
<div class="ani index-earlyTitle" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.2s">
<img src="cmbChina%20demo/images/earlyTitle.png" alt="" class="ani earlyTitle"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2.8s">
</div>
<div class="ani index-lastBusStation" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="3.8s">
<img src="cmbChina%20demo/images/lastBusStation.png" alt="" class="ani lastBusStation"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="6.5s">
</div>
<div class="ani index-bus" swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s" swiper-animate-delay="4.2s">
<img src="cmbChina%20demo/images/bus.png" alt="" class="ani bus"  swiper-animate-effect="slideOutLeft" swiper-animate-duration="1.3s" swiper-animate-delay="4.4s">
</div>
<div class="ani index-lastBusAvatar" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="4.4s">
<img src="cmbChina%20demo/images/lastBusAvatar.png" alt="" class="ani lastBusAvatar"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="6.5s">
</div>
<div class="ani index-lastBusTitle" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="4.6s">
<img src="cmbChina%20demo/images/lastBusTitle.png" alt="" class="ani lastBusTitle"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="6.5s">
</div>
<img src="cmbChina%20demo/images/myTeamBg.jpg" alt="" class="ani myTeamBg"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.7s">
<div class="ani myTeamFoot"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.7s"></div>
<img src="cmbChina%20demo/images/myTeamWall.png" alt="" class="ani myTeamWall"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.7s">
<img src="cmbChina%20demo/images/myTeamAvatar.png" alt="" class="ani myTeamAvatar"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="8s">
<img src="cmbChina%20demo/images/myTeamTxt.png" alt="" class="ani myTeamTxt"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8.5s">
<img src="cmbChina%20demo/images/myTeamTxt01.png" alt="" class="ani myTeamTxt01"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8.7s">
<img src="cmbChina%20demo/images/myTeamTxt02.png" alt="" class="ani myTeamTxt02"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="8.9s">
<img src="cmbChina%20demo/images/myTeamTxt03.png" alt="" class="ani myTeamTxt03"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="9.1s">
<img src="cmbChina%20demo/images/myteamWhereTxt.png" alt="" class="ani myteamWhereTxt"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="9.3s">
<img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="8.8s">
</div>
<div class="swiper-slide index-fourth">
<div class="index-fourth-out">
<img src="cmbChina%20demo/images/lightOffBg.jpg" alt="" class="ani lightOffBg"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.1s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/lightOff.png" alt="" class="ani lightOff"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.1s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/cornerWall.png" alt="" class="ani cornerWall"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.1s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/cornerTitle.png" alt="" class="ani cornerTitle"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
<div class="ani index-clickGuide"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s">
<img src="cmbChina%20demo/images/clickGuide.png" alt="" class="ani infinite clickGuide"  swiper-animate-effect="pulse" swiper-animate-duration="0.8s" swiper-animate-delay="0s">
</div>
</div>
<div class="index-fourth-in" >
<div class="ani index-fourth-in-bg" swiper-animate-effect="fadeIn" swiper-animate-duration="0s"
swiper-animate-delay="0s"></div>
<img src="cmbChina%20demo/images/lightOn.png" alt="" class="ani lightOn" swiper-animate-effect="fadeIn" swiper-animate-duration="0s"
swiper-animate-delay="0s">
<img src="cmbChina%20demo/images/weKnowYou.png" alt="" class="ani weKnowYou" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
swiper-animate-delay="0.8s">
<img src="cmbChina%20demo/images/lightOnBg.jpg" alt="" class="ani lightOnBg" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
<img src="cmbChina%20demo/images/lightFlowers.png" alt="" class="ani lightOnFlowers" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
</div>
</div>
<div class="swiper-slide index-fifth">
<div class="ani index-footTa"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/footTa.png" alt="" class="ani footTa"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2s">
</div>
<img src="cmbChina%20demo/images/footAvatar.png" alt="" class="ani footAvatar"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5">
<img src="cmbChina%20demo/images/footCity.jpg" alt="" class="ani footCity"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.6">
<img src="cmbChina%20demo/images/footTx.png" alt="" class="ani footTx"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.4s">
<img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
</div>
<div class="swiper-slide index-sixth">
<div class="ani index-runTa"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/runTa.png" alt="" class="ani runTa"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2s">
</div>
<img src="cmbChina%20demo/images/runAvatar.png" alt="" class="ani runAvatar"  swiper-animate-effect="zoomInRight" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
<img src="cmbChina%20demo/images/runTxt.png" alt="" class="ani runTx"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.4s">
<img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
</div>
<div class="swiper-slide index-seven">
<div class="ani index-salaryTa"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/salaryTa.png" alt="" class="ani salaryTa"  swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="2s">
</div>
<img src="cmbChina%20demo/images/salaryTxt.png" alt="" class="ani salaryTx"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="2.4s">
<img src="cmbChina%20demo/images/salaryBg.png" alt="" class="ani salaryBg"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
<img src="cmbChina%20demo/images/salaryAvatar.png" alt="" class="ani salaryAvatar"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.3s">
<img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
</div>
<div class="swiper-slide index-eighth">
<div class="ani intro-txtContainer"
swiper-animate-delay="0.3s">
<div class="introTxt">
<p>招商银行是世界500强企业，也是我国第一家完全有企业法人持股的股份制商业银行。</p>
<p>招银网络科技（简称招银科技）是招商银行的全资子公司，致力于为招商银行全球化发展提供强有力的软件开发及技术支持。公司以成为中国银行业最强大脑为己任，在彼此信任和尊重的基础上，追求高标准的交付和价值创造。现有深圳、杭州两家分支机构，共同担负着招商银行电子信息化的重任。</p>
<p>这里是中国最具活力的银行，这里是中国最优秀的金融IT团队之一。如果您足够优秀，那么这里将会是您智慧闪光、价值实现和梦想腾飞的舞台，我们热忱期待您的加盟。</p>
</div>
</div>
<img src="cmbChina%20demo/images/introLogo.png" alt="" class="ani introLogo"  swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/introFlowers.png" alt="" class="ani infinite introFlowers" swiper-animate-effect="pulse" swiper-animate-duration="0.8s"swiper-animate-delay="0.3s" >
<img src="cmbChina%20demo/images/introCloudy.png" alt="" class="ani introCloudy"  swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/introStar.png" alt="" class="ani infinite introStar" swiper-animate-effect="pulse" swiper-animate-duration="0.5s"swiper-animate-delay="0.3s" >
<img src="cmbChina%20demo/images/introAvatar.png" alt="" class="ani introAvatar"  swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/arrow-up.png" alt="" class="ani infinite arrow"  swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s">
</div>
<div class="swiper-slide index-last">
<img src="cmbChina%20demo/images/endLogo.png" alt="" class="ani endLogo"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
<img src="cmbChina%20demo/images/endTxt.png" alt="" class="ani endTxt"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
<img src="cmbChina%20demo/images/endMail.png" alt="" class="ani endMail"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
<img src="cmbChina%20demo/images/endClickGuide.png" alt="" class="ani endClickGuide"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="1s">
<img src="cmbChina%20demo/images/endBottomTxt.png" alt="" class="ani endBottomTxt"  swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
<div class="ani index-endAvatar"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.1s">
<img src="cmbChina%20demo/images/endAvatar.png" alt="" class="ani infinite endAvatar"  swiper-animate-effect="bounce" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
</div>
<div class="ani index-endCloudys"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.9s">
<img src="cmbChina%20demo/images/endCloudys.png" alt="" class="ani infinite endCloudys"  swiper-animate-effect="pulse" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
</div>
</div>
</div>

</div>
<div class="swiper-pagination"></div>
</div>

<script src="swiper.min.js"></script>
<script src="swiper.animate1.0.2.min.js"></script>
<script src="index.js"></script>
<script src="app.js"></script>
</body>
</html>

index.css代码：

html,body{
width: 100%;
height:100%;
}

.swiper-container{
width: 100%;
height: 100%;
}
.swiper-slide{

background-color: #fff;
}

.index-first{
width: 100%;
height: 100%;
background-color: #5173ff;
position: relative;
}
.building{
width: 100%;
height: 30%;
position: absolute;
bottom: 0;
z-index: 1;
}
.index-first img:first-child{
position: absolute;
width: 60%;
height: 20%;
top:10%;
left:20%;
}
.index-first img:nth-child(2){
position: absolute;
width: 15%;
height: 13%;
left: 10%;
top:12%;

}
.index-first img:nth-child(3){
position: absolute;
top:21%;
right:22%;
width: 15%;
height: 10%;
}
.index-flight{
position: absolute;
right:10%;
top:30%;
width: 100%;
height: 30%;
}
#flight{
width: 80%;
height: 100%;

}
.index-star{
position: absolute;
width: 100%;
height: 100%;

}
#star{
width: 100%;
height: 100%;
top:0;
left: 0;
}
.index-cloud{
position: absolute;
width: 100%;
height: 70%;
z-index: 3;

}
#cloud{
width: 90%;
height: 100%;
top:8%;
left: 5%;
}
.index-end{
position: absolute;
width: 100%;
height: 90%;
z-index: 3;

}
#end{
width: 100%;
height: 100%;
top:10%;
left: 0;

}
.arrow{
position: absolute;
left: 45%;
bottom: 5%;
width: 10%;
z-index: 3;
}
.index-second{
background-color: #000;
position: relative;
}
.wasBg{
width: 100%;
height: 100%;
}
.wasIT{
width: 60%;
height: 10%;
position: absolute;
left: 20%;
top:40%;
z-index: 2;
}
.wasFarm{
width: 60%;
height: 10%;
position: absolute;
left: 20%;
top:60%;
z-index: 2;
}
.wasStar{
width: 60%;
height: 60%;
position: absolute;
top:20%;
left:20%;
z-index: 1;
}
.index-third{
background-color: #03172f;
position: relative;
}
.index-earlyBg{
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
}
.earlyBg{
width: 100%;
height: 60%;
}
.index-earlyBuilding{
position: absolute;
width: 100%;
height: 80%;
bottom: 0;
left: 0;
}
.earlyBuilding{
width: 100%;
height: 100%;
}

.index-earlyTitle{
position: absolute;
width: 25%;
height: 5%;
left: 0;
top:10%;
}
.earlyTitle{
width: 100%;
height: 100%;
}
.index-lastBusStation{
position: absolute;
width: 100%;
height: 70%;
left: 0;
bottom: 0;
}
.lastBusStation{
width: 100%;
height: 100%;
}
.index-bus{
position: absolute;
width: 60%;
height: 30%;
left: 0;
bottom: 10%;
}
.bus{
width: 100%;
height: 100%;
}
.index-lastBusAvatar{
width: 30%;
height: 15%;
position: absolute;
bottom: 10%;
right: 8%;
}
.lastBusAvatar{
width: 100%;
height: 100%;
}
.index-lastBusTitle{
position: absolute;
width: 30%;
height: 5%;
top:10%;
left: 0;
}
.lastBusTitle{
width: 100%;
height: 100%;
}
.myTeamBg{
position: absolute;
width: 100%;
height: 90%;
top:0;
left: 0;
}
.myTeamFoot{
position: absolute;
width: 100%;
height: 10%;
bottom:0;
left: 0;
background-color: #000;
}
.myTeamWall{
position: absolute;
width: 30%;
height: 55%;
bottom:0;
right: 0;
}
.myTeamAvatar{
position: absolute;
width: 30%;
height: 20%;
top:23%;
right: 5%;
}
.myTeamTxt{
position: absolute;
width: 13%;
height: 3%;
top:32%;
left:15%;
}
.myTeamTxt01{
position: absolute;
width: 20%;
height: 5%;
top:36%;
left:15%;
}
.myTeamTxt02{
position: absolute;
width: 20%;
height: 5%;
top:42%;
left:15%;
}
.myTeamTxt03{
position: absolute;
width: 20%;
height: 5%;
top:48%;
left:15%;
}
.myteamWhereTxt{
width: 38%;
height: 10%;
position: absolute;
left: 31%;
bottom: 11%;
}
.index-fourth{
position: relative;
background-color: #302e5c;
}
.lightOffBg{
width: 100%;
height: 100%;
top:0;
left: 0;
position: absolute;
}
.lightOff{
width: 35%;
height: 85%;
left: 0;
bottom: 0;
position: absolute;
}
.cornerWall{
width: 20%;
height: 90%;
right: 0;
bottom: 0;
position: absolute;
}
.cornerTitle{
width: 53%;
height: 9%;
right: 0;
top: 7%;
position: absolute;
}
.index-clickGuide{
width: 50%;
height: 3%;
position: absolute;
left: 25%;
top:29%;
}
.clickGuide{
width: 100%;
height: 100%;
}
.index-fourth-in{
position: relative;
width: 100%;
height: 100%;
display: none;
}
.index-fourth-in-bg{
width: 100%;
height: 100%;
background-color: #1a7fdc;
}
.lightOn{
width: 35%;
height: 85%;
left: 0;
bottom: 0;
position: absolute;
z-index: 3;
}
.weKnowYou{
width: 50%;
height: 9%;
left: 30%;
top:25%;
position: absolute;
z-index: 3;
}
.lightOnBg{
width: 100%;
height: 100%;
left: 0;
top:10%;
position: absolute;
z-index: 1;
}
.lightOnFlowers{
width: 25%;
height: 13%;
right: 5%;
bottom: -1%;
position: absolute;
z-index: 3;
}

.index-fifth{
background:url("cmbChina demo/images/aboutBg.jpg");
background-size: cover;
position: relative;
}
.index-footTa{
position: absolute;
width: 80%;
height: 20%;
left: 10%;
top:60%;
}
.index-footTa .footTa{
width:100%;
height: 100%;
}
.footCity{
position: absolute;
width: 100%;
height: 30%;
top:0;
z-index: 1;
}
.footAvatar{
position: absolute;
width: 70%;
height: 35%;
top:15%;
left: 25%;
z-index: 3;
}
.footTx{
position: absolute;
width: 50%;
height: 15%;
top:60%;
left: 25%;
}
.index-sixth{
background: url("cmbChina demo/images/runBg.jpg");
background-size: cover;
position: relative;
}
.index-runTa{
position: absolute;
width: 80%;
height: 20%;
left: 10%;
top:50%;
}
.index-runTa .runTa{
width:100%;
height: 100%;
}

.runAvatar{
position: absolute;
width: 40%;
height: 30%;
top:10%;
left: 15%;

}
.runTx{
position: absolute;
width: 50%;
height: 15%;
top:50%;
left: 25%;
}
.index-seven{
background-color: #4ADD9D;
position: relative;
}
.index-salaryTa{
position: absolute;
width: 80%;
height: 20%;
left: 10%;
top:60%;
}
.index-salaryTa .salaryTa{
width:100%;
height: 100%;
}
.salaryTx{
position: absolute;
width: 60%;
height: 15%;
top:60%;
left: 20%
}
.salaryBg{
position: absolute;
width: 90%;
height: 55%;
top:5%;
left: 5%;
}
.salaryAvatar{
position: absolute;
width: 46%;
height: 35%;
top:9%;
left: 21%;
}
.index-eighth{
background-color: #B5EFFD;
position: relative;
}
.intro-txtContainer{
width: 96%;
height: 70%;
left: 2%;
top: 15%;
background-color: #FC5955;
border-radius: 10px;
position: absolute;
z-index: 2;
}
.introTxt{
width: 94%;
height: 90%;
background-color: #EF3D38;
top:3%;
left: 3%;
position: absolute;
font-size: 18px;

}
.introTxt p{
color: white;
text-indent: 2em;
padding: 0 5px;
vertical-align: baseline;

}
.introTxt p:first-child{
margin-top: 30px;
}
.introLogo{
position: absolute;
width: 50%;
height: 8%;
left: 25%;
top:11%;
z-index: 4;
}
.introFlowers{
width:25% ;
height: 10%;
top:8%;
left:3%;
position: absolute;
z-index: 1;
}
.introCloudy{
width: 94%;
height: 70%;
left: 3%;
top:12.8%;
position: absolute;
z-index: 5;
}
.introStar{
position: absolute;
width: 15%;
height: 10%;
right: 30%;
bottom: 15%;
z-index: 5;
}
.introAvatar{
width: 34%;
height: 24%;
position: absolute;
bottom:0;
right: 0;
z-index: 5;
}
.index-last{
background: url("cmbChina demo/images/endBg.png") #3e88f1;
background-size:100% 100%;
position: relative;
}
.endLogo{
position: absolute;
width: 54%;
height: 5%;
left: 23%;
top:10%;
}
.endTxt{
position: absolute;
width: 60%;
height: 11%;
left: 20%;
top:22%;
}
.endMail{
position: absolute;
width: 60%;
height: 5%;
left: 20%;
top:36%;
}
.endClickGuide{
position: absolute;
width: 36%;
height: 3%;
left: 32%;
top:48%;
}
.endBottomTxt{
position: absolute;
width: 44%;
height: 4%;
left: 28%;
bottom:2%;
}
.index-endAvatar{
position: absolute;
width: 60%;
height: 20%;
left: 20%;
top:57%;
}
.endAvatar{
width: 100%;
height: 100%;
}
.index-endCloudys{
position: absolute;
width: 90%;
height: 75%;
left: 5%;
top:10%;
}
.endCloudys{
width: 100%;
height: 100%;
}
.music{
position: absolute;
width:15%;
height: 8%;
top:3%;
right: 1%;
z-index:10;
}
.music img{
width: 100%;
height: 100%;
}

index.js代码：

var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: false,

// 如果需要分页器
pagination: '.swiper-pagination',
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}

});

app.js代码：

function controlLight() {
var isOpen=true;
document.querySelector(".lightOff").onclick=function () {

document.querySelector(".index-fourth-out").style.display="none";
document.querySelector(".index-fourth-in").style.display="block";
};
document.querySelector(".music").onclick=function () {
isOpen=!isOpen;
if(isOpen===true){
document.querySelector(".musicImg").src="cmbChina%20demo/images/musicBtnOff.png";
document.querySelector(".audio").pause();
}else {
document.querySelector(".musicImg").src="cmbChina%20demo/images/musicBtn.png";
document.querySelector(".audio").play();
}
}
}
controlLight();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航