zepto移动端案例（动画等）
处理：滑动页⾯事件、动画效果(缩放、各⽅位滑动、抖动、明暗)、
代码⽰例:
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=fal;
//定义滑动功能
function movePage(dir)
{
//初始化参与动画的页⾯，加'.'是因为可以之间获取dom对象娱乐篮球
var lastPage='.page-'+l+'-'+w;
var nowPage='.page-'+l+'-'+w;
//初始化动画类
var inClass='';//进场动画类
var outClass='';//出场动画类
//匹配⽅向
switch(dir){
ca direction.up:
outClass='pg-moveToTop';
inClass='pg-moveFromBottom';
break;
ca direction.right:
outClass='pg-moveToRight';
inClass='pg-moveFromLeft';
break;
ca direction.down:
outClass='pg-moveToBottom';
inClass='pg-moveFromTop';
break;
ca 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毫秒页⾯完全占据屏幕，才显⽰元素并加载动画tTimeout(function(){
$(lastPage).find('img').addClass('hide');
$(nowPage).removeClass(inClass);
$(nowPage).addClass('page-current');
$(nowPage).find('img').removeClass('hide');
isMoving=fal;
等风来票房},600);
}
//滑动事件(要先禁⽌滑动的默认⾏为)
$('.page').swipeUp(function(){
//判断页⾯是否滑动
if(isMoving)
{
return;
}
//出场页⾯
console.log(1);
//最后⼀页不能滑动
l<5)
{
//进场页⾯
movePage(direction.up);
}
})
$('.page').swipeDown(function(){
if(isMoving)
{
return;
}
console.log(2);
l>1)
{
手势比心
movePage(direction.down);
}
})
$('.page').swipeLeft(function(){
if(isMoving)
{
return;
}
console.log(3);
console.w);
//只有第⼀个页⾯和最后⼀个页⾯⽆额外页⾯，并且左右只有两个页⾯l<5&&l>1&&w==1)
movePage(direction.left);
console.w);
}
})
$('.page').swipeRight(function(){
if(isMoving)
{
return;
}
console.log(4);
//只有第⼀个页⾯和最后⼀个页⾯⽆额外页⾯，并且左右只有两个页⾯l<5&&l>1&&w==2)
{
movePage(direction.right);
}
360急速模式
})
})
动画css⽂件:
/*定义四⽅向的动画*/
/*向上滑动*/
/*进场*/
.pg-moveToTop{
animation:moveToTop 0.6s ea both;
}
/*出场*/
.pg-moveFromBottom{
animation:moveFromBottom 0.6s ea both;
}
/*向下滑动*/
.pg-moveToBottom{
animation:moveToBottom 0.6s ea both;
}
.pg-moveFromTop{
animation:moveFromTop 0.6s ea both;
}
/*向左滑动*/
.pg-moveToLeft{
animation:moveToLeft 0.6s ea both;
}
.pg-moveFromRight{
animation:moveFromRight 0.6s ea both;
自制新年挂饰}
/*向右滑动*/
.pg-moveToRight{
animation:moveToRight 0.6s ea 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 ea both infinite;
}
@keyframes moveUp {
0%{
transform:translateY(100%);
opacity:0;
}
50%{
transform:translateY(0%);
opacity:1;
}
100%{
transform:translateY(-100%);
/*定义原抖动动画*/
.pg-moveCircle{
animation:moveCircle 1.5s ea 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 ea both;
}
@keyframes scaleUp {
from{transform:scale(0.4);}
to{}
}
/*定义翻转动画*/
.pg-turn{
animation:turn 0.6s ea 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{
