版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
HTML内容：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入jQuery文件-->
<script src="js/jquery-3.3.1.js"></script>
<!--引入swipe文件-->
<script src="js/jquery.touchSwipe.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入js文件-->
<script type="text/javascript" src="js/weixin3.js"></script>
<!--引入css文件-->
<link type="text/css" href="css/weixin3.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<!--第一页-->
<div class="page page1">
<!--背景图-->
<img src="img/indexBuilding.png" class="page1_building" />
<!--转角遇到爱的文字-->
<img src="img/indexTxt.png" class="page1_title"/>
<!--设置云-->
<img src="img/indexCloud.png" class="page1_cloud" />
<!--其他元素-->
<img src="img/indexElements.png" class="page1_elements" />
<!--两朵太阳花-->
<img src="img/indexFlowers01.png" class="page1_leftflower" />
<img src="img/indexFlowers02.png" class="page1_rightflower" />
<!--人-->
<img src="img/indexFlight.png" class="page1_person"/>
</div>
<!--第二页-->
<div class="page page2">
<img src="img/wasBg.jpg" class="page2_back"/>
<img src="img/wasFarm.png" class="page2_title1" />
<img src="img/wasIT.png" class="page2_title2"/>
</div>
<!--第三页-->
<div class="page page3">
<img src="img/lastBusStation.png" class="page3_back"/>
<img src="img/earlyTitle.png" class="page3_early" />
<img src="img/lastBusTitle.png" class="page3_last" />
<img src="img/bus.png" class="page3_bus" />
<img src="img/lastBusAvatar.png" class="page3_person" />
</div>
<!--第四页-->
<div class="page page4">
<!--场景1-->
<img src="img/lightOffBg.jpg" class="page4_back1" />
<img src="img/cornerTitle.png" class="page4_title1" />
<img src="img/clickGuide.png" class="page4_guide"/>
<!--场景2-->
<img src="img/lightOnBg.jpg" class="page4_back2" />
<img src="img/weKnowYou.png" class="page4_title2" />
<!--场景1 和 场景2 共同的灯 点击事件 切换图片-->
<img src="img/lightOff.png" class="page4_light" onclick="onlight(this)"/>
</div>
</div>
</body>
</html>css内容
//定义一个变量，记录当前的页码
var currentPage = 0;
$(function(){
//1.获取窗口的大小
var w_width = window.innerWidth;
var w_height = window.innerHeight;
//2.设置容器的大小
var container = $("#container");
container.width(w_width);
container.height(w_height * 4);
//3.设置每一页的大小
var divPage = $(".page");
divPage.width(w_width);
divPage.height(w_height);
//4.第一页
//背景有一个淡入的效果，人有一个飞入的效果
$(".page1_building").fadeIn(1000,function(){
$(".page1_person").animate({"left":"15%","width":"70%"},1500);
})
//5.向上滑动翻页：Swape插件的使用
container.swipe({
/*
* event:事件对象
* direction：滑动的方向
* distance：滑动的距离
* duration：持续的时间
* fingerCount：滑动需要的手指个数
*/
swipe:function(event,direction,distance,duration,fingerCount){
if(direction == "up"){ //向上滑动
currentPage++;
} else if(direction == "down"){ //向下滑动
currentPage--;
}
//临界值
if(currentPage > 3){
currentPage = 3;
}
if(currentPage < 0){
currentPage = 0;
}
//给整体添加动画
//注意：容器向上移动一个页面，距离top的值为-（一个页面的高度）
container.animate({"top":currentPage * (-w_height) + "px"},400,function(){
//第二页
if(currentPage == 1){
//背景图淡入
$(".page2_back").fadeIn(1000,function(){
//文本1动画进入
$(".page2_title1").animate({"width":"70%","right":"0px"},1000,function(){
//文本2动画进入
$(".page2_title2").animate({"width":"70%","right":"0px"},1000);
})
})
}
//第三页
if(currentPage == 2){
$(".page3_bus").animate({"left":"-100%"},2000);
$(".page3_person").animate({"right":"50%"},2000);
}
})
}
})
})
function onlight(img){
//修改灯的图片
img.src = "img/lightOn.png";
//场景1 淡出 淡出成功之后 场景2 淡入
$(".page4_back1").fadeOut("slow");
$(".page4_title1").fadeOut("slow");
$(".page4_guide").fadeOut("slow",function(){
//场景二淡入
$(".page4_back2").fadeIn(500,function(){
$(".page4_title2").fadeIn(500);
})
})
}js：
*{
margin: 0;
padding: 0;
}
/*设置容器有效的定位属性 --- 设置容器的移动*/
#container{
position: absolute;
}
/*设置第一页*/
.page1{
background-color: red;
/*设置定位属性当做参照物*/
position: relative;
}
/*设置背景图*/
.page1_building{
position: absolute;
bottom: 0px;
width: 100%;
/*默认是隐藏的 -- 便于之后设计淡入的效果*/
display: none;
}
/*设置第一页的标题*/
.page1_title{
position: absolute;
height: 60%;
top: 20%;
left: 20%;
}
/*设置云和其他元素*/
.page1_cloud, .page1_elements{
position: absolute;
width: 70%;
height: 70%;
left: 15%;
top: 15%;
animation: zoomAnimate 2s infinite linear;
}
/*设定一个动画: 云和其他元素一直运动*/
@keyframes zoomAnimate{
0%{
transform: scale(1);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1);
}
}
/* 设置小花*/
.page1_leftflower{
position: absolute;
left: 15%;
top: 10%;
animation: flowerAnimate 2s infinite linear;
}
.page1_rightflower{
position: absolute;
top: 10%;0%
right: 15%;
animation: flowerAnimate 2s infinite linear;
}
/*设置花的动画*/
@keyframes flowerAnimate{
0%{transform: rotate(-20deg);}
25%{transform: rotate(0deg);}
50%{transform: rotate(20deg);}
75%{transform: rotate(0deg);}
100%{transform: rotate(-20deg);}
}
/* 设置人*/
.page1_person{
position: absolute;
bottom: 30%;
left: -100%;
/*人进来之后是慢慢变大的*/
width: 0;
animation: zoomAnimate 2s infinite linear;
}
/*第二页*/
.page2{
background-color: blue;
/*将其设置为参照物*/
position: relative;
}
/*设置第二页的背景图*/
.page2_back{
width: 100%;
height: 100%;
/*为了设置淡入的效果*/
display: none;
}
.page2_title1, .page2_title2{
position: absolute;
right: -100%;
width: 0px;
}
.page2_title1{
top: 30%;
}
.page2_title2{
top: 60%;
}
/*第三页*/
.page3{
background-color: orange;
/*设置为参照物*/
position: relative;
}
.page3_back{
width: 100%;
height: 100%;
}
/*凌晨 最后一班车*/
.page3_early, .page3_last{
position: absolute;
left: 0px;
height: 5%;
}
.page3_early{
top: 10%;
}
.page3_last{
top: 17%;
}
/*设置车*/
.page3_bus{
position: absolute;
left: 0px;
bottom: 10%;
width: 50%;
}
/*
* 设置人
*/
.page3_person{
position: absolute;
right: 0;
bottom: 10%;
}
/*第四页*/
.page4{
background-color: yellow;
/*设置为参照物*/
position: relative;
}
/*场景1*/
.page4_back1{
width: 100%;
height: 100%;
}
/*标题*/
.page4_title1{
position: absolute;
right: 0px;
top: 15%;
width: 50%;
}
/*设置灯*/
.page4_light{
position: absolute;
bottom: 0px;
left: 6%;
height: 70%;
}
/*开灯引语*/
.page4_guide{
width: 50%;
position: absolute;
left: 18%;
top: 40%;
animation: zoomAnimate 2s infinite linear;
}
/*场景二的样式*/
.page4_back2{
width: 100%;
height: 100%;
display: none;
}
.page4_title2{
position: absolute;
width: 50%;
left: 25%;
top: 40%;
display: none;
}