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=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>