处理:滑动页面事件、动画效果(缩放、各方位滑动、抖动、明暗)、
代码示例:
js文件:
$(function(){
//定义方向对象
var direction={up:1,right:2,down:3,left:4};
//初始化两个页面坐标
var now={col:1,row:1};
var last={col:0,row:0};
//上一个页面动画结束标志
var isMoving=false;
//定义滑动功能
function movePage(dir)
{
//初始化参与动画的页面,加'.'是因为可以之间获取dom对象
var lastPage='.page-'+last.col+'-'+last.row;
var nowPage='.page-'+now.col+'-'+now.row;
//初始化动画类
var inClass='';//进场动画类
var outClass=''; //出场动画类
//匹配方向
switch(dir){
case direction.up:
outClass='pg-moveToTop';
inClass='pg-moveFromBottom';
break;
case direction.right:
outClass='pg-moveToRight';
inClass='pg-moveFromLeft';
break;
case direction.down:
outClass='pg-moveToBottom';
inClass='pg-moveFromTop';
break;
case direction.left:
outClass='pg-moveToLeft';
inClass='pg-moveFromRight';
break;
}
//之前页面退场
$(lastPage).addClass(outClass);
//当前页面进场
$(nowPage).removeClass('hide');
$(nowPage).addClass(inClass);
isMoving=true;
//动画执行完清除动画类,否则添加的重复类只执行一次
//触发滑动事件后,等待600毫秒,即页面完全占据屏幕后,再执行动画
//isMoving页面还未占据屏幕时,不能滑动
//元素若设置了display:none;只有当元素显示的时候,动画才会执行,因此当600毫秒页面完全占据屏幕,才显示元素并加载动画
setTimeout(function(){
$(lastPage).removeClass(outClass);
$(lastPage).addClass('hide');
$(lastPage).removeClass('page-current');
$(lastPage).find('img').addClass('hide');
$(nowPage).removeClass(inClass);
$(nowPage).addClass('page-current');
$(nowPage).find('img').removeClass('hide');
isMoving=false;
},600);
}
//滑动事件(要先禁止滑动的默认行为)
$('.page').swipeUp(function(){
//判断页面是否滑动
if(isMoving)
{
return;
}
//出场页面
console.log(1);
last.col=now.col;
last.row=now.row;
//最后一页不能滑动
if(last.col<5)
{
//进场页面
now.col=last.col+1;
now.row=last.row;
movePage(direction.up);
}
})
$('.page').swipeDown(function(){
if(isMoving)
{
return;
}
console.log(2);
last.col=now.col;
last.row=now.row;
if(last.col>1)
{
now.col=last.col-1;
now.row=last.row;
movePage(direction.down);
}
})
$('.page').swipeLeft(function(){
if(isMoving)
{
return;
}
console.log(3);
last.col=now.col;
last.row=now.row;
console.log(last.col,last.row);
//只有第一个页面和最后一个页面无额外页面,并且左右只有两个页面
if(last.col<5&&last.col>1&&last.row==1)
{
now.row=last.row+1;
now.col=last.col;
movePage(direction.left);
console.log(now.col,now.row);
}
})
$('.page').swipeRight(function(){
if(isMoving)
{
return;
}
console.log(4);
last.col=now.col;
last.row=now.row;
//只有第一个页面和最后一个页面无额外页面,并且左右只有两个页面
if(last.col<5&&last.col>1&&last.row==2)
{
now.row=last.row-1;
now.col=last.col;
movePage(direction.right);
}
})
})
动画css文件:
/*定义四方向的动画*/
/*向上滑动*/
/*进场*/
.pg-moveToTop{
animation:moveToTop 0.6s ease both;
}
/*出场*/
.pg-moveFromBottom{
animation:moveFromBottom 0.6s ease both;
}
/*向下滑动*/
.pg-moveToBottom{
animation:moveToBottom 0.6s ease both;
}
.pg-moveFromTop{
animation:moveFromTop 0.6s ease both;
}
/*向左滑动*/
.pg-moveToLeft{
animation:moveToLeft 0.6s ease both;
}
.pg-moveFromRight{
animation:moveFromRight 0.6s ease both;
}
/*向右滑动*/
.pg-moveToRight{
animation:moveToRight 0.6s ease both;
}
.pg-moveFromLeft{
animation:moveFromLeft 0.6s ease both;
}
/*向上*/
@keyframes moveToTop{
/*因为是出场,从元素最初设置的默认位置向上移动整个元素的高度*/
from {}
to {transform:translateY(-100%)}
}
@keyframes moveFromBottom{
/*因为是进场,从离默认位置的下方距离一个元素的高度向上移动到默认位置*/
from {transform:translateY(100%)}
to {}
}
/*向下*/
@keyframes moveToBottom{
from {}
to {transform:translateY(100%)}
}
@keyframes moveFromTop{
from {transform:translateY(-100%)}
to {}
}
/*向右*/
@keyframes moveToRight{
from {}
to {transform:translateX(100%)}
}
@keyframes moveFromLeft{
from {transform:translateX(-100%)}
to {}
}
/*向左*/
@keyframes moveToLeft{
from {}
to {transform:translateX(-100%)}
}
@keyframes moveFromRight{
from {transform:translateX(100%)}
to {}
}
/*箭头动画*/
.pt-arrow{
animation:moveUp 1.5s ease both infinite;
}
@keyframes moveUp {
0%{
transform:translateY(100%);
opacity:0;
}
50%{
transform:translateY(0%);
opacity:1;
}
100%{
transform:translateY(-100%);
opacity:0;
}
}
/*定义原抖动动画*/
.pg-moveCircle{
animation:moveCircle 1.5s ease both;
}
@keyframes moveCircle {
0%{transform: translateY(-80%);opacity: 0.1;}
20%{transform: translateY(-80%);opacity: 0.3;}
35%{transform: translateY(10%);opacity: 0.8;}
60%{transform: translateY(-5%);opacity: 0.8;}
65%{transform: translateY(-2%);opacity: 0.8;}
70%{transform: translateY(-1%);opacity: 0.9;}
75%{transform: translateY(-0.5%);opacity: 0.95;}
80%{transform: translateY(0%);opacity: 1;}
100%{transform: translateY(0%);opacity: 1;}
}
/*定义缩放的动画*/
.pg-scaleUp{
animation:scaleUp 0.6s ease both;
}
@keyframes scaleUp {
from{transform: scale(0.4);}
to{}
}
/*定义翻转动画*/
.pg-turn{
animation:turn 0.6s ease both;
transform-origin: 50% 50%;
}
@keyframes turn {
from {transform:rotateY(90deg)}
to{}
}
布局css文件:
#container{
width:100%;
height:100%;
}
.page{
width:100%;
height:100%;
position: absolute;
}
/*定义页面背景色*/
.page-1-1{
background-color:#083846;
}
.page-2-1{
background-color:#9261BF;
}
.page-2-2{
background-color:#9261BF;
}
/*定义隐藏类*/
.hide{
display:none;
}
/*定义层级*/
.page-current{
z-index:2;
}
/*禁止滑动默认事件*/
*{
touch-action: none;
}
.page-1-1 .img_1{
height:auto;;
width:248px;
position: absolute;
top:1%;
left:50%;
margin-left:-124px;
}
.page-1-1 .img_2{
height: auto;
width: 185px;
position: absolute;
top:62%;
left: 50%;
margin-left: -92px;
}
.page-2-1 .img_1{
height: auto;
width: 158px;
position: absolute;
top: 2%;
left: 50%;
margin-left:-79px ;
z-index:2;
}
.page-2-1 .img_2{
height: auto;
width: 240px;
position: absolute;
top: 28%;
left: 50%;
margin-left:-120px ;
}
.page-2-1 .img_3{
height: auto;
width: 241px;
position: absolute;
top: 36%;
left: 50%;
margin-left:-120px ;
}
.page-2-1 .img_4{
height: auto;
width: 20px;
position: absolute;
top: 87%;
left: 50%;
margin-left:-10px ;
}
.page-2-1 .img_5{
height: auto;
width: 142px;
position: absolute;
top: 82%;
left: 50%;
margin-left:-71px ;
}
.page-2-1 .img_7{
height: auto;
width: 248px;
position: absolute;
top: 8%;
left: 50%;
margin-left:-124px ;
}
.page-2-2 .img_1 {
height:auto;
width:293px;
position:absolute;
left:50%;
top:5%;
margin-left:-146px;
}
.page-2-2 .img_2 {
height:auto;
width:260px;
position:absolute;
left:50%;
top:75%;
margin-left:-130px;
}
.page-2-2 .img_3 {
height:auto;
width:20px;
position:absolute;
left:50%;
top:87%;
margin-left:-10px;
}
.page-2-2 .img_6 {
height:auto;
width:25px;
position:absolute;
left:50%;
top:92%;
margin-left:-12px;
}
/*当以公共的样式*/
.common_img{
height: auto;
width: 25px;
position: absolute;
top: 92%;
left: 50%;
margin-left:-12px;
}
主页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>do it</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/animate.css"/>
</head>
<body>
<div id="container">
<div class="page page-1-1 page-cuurent ">
<img class="img_1 pg-moveFromTop" src="img/cover.png" alt=""/>
<img class='img_2 pg-moveFromLeft' src="img/wording_cover.png" alt=""/>
<img class="img_3 common_img pg-moveToTop pt-arrow"src="img/icon_up.png" alt=""/>
</div>
<div class="page page-2-1 hide">
<img class="img_1 hide pg-moveFromBottom" src="img/wording.png" />
<img class="img_2 hide pg-moveCircle" src="img/circle.png" />
<img class="img_3 hide pg-moveFromLeft" src="img/people.png" />
<img class="img_4 hide pg-scaleUp" src="img/dot1.png" />
<img class="img_5 hide pg-scaleUp" src="img/check_develop.png" />
<img class="img_6 hide common_img pt-arrow" src="img/icon_up.png" />
<img class="img_7 hide pg-scaleUp" src="img/floating_develop.png" />
</div>
<div class="page page-2-2 hide">
<img class="img_1 hide pg-turn" src="img/introduction.png" />
<img class="img_2 hide pg-turn" src="img/btn_develop.png" />
<img class="img_3 hide pg-turn" src="img/dot2.png" />
<img class="img_6 hide common_img pt-arrow" src="img/icon_up.png" />
</div>
</div>
<script type='text/javascript' src='js/zepto.js'></script>
<script type='text/javascript' src='js/touch.js'></script>
<script type='text/javascript' src='js/index.js'></script>
</body>
</html>