apicloud apicloud

注册
查看: 13781|回复: 42

[APP开发技巧] 利用touch.js实现滑动引导页(上下左右四个滑动方向)

 

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

[APP开发技巧] 利用touch.js实现滑动引导页(上下左右四个滑动方向)

 
13781 42 | 发表于 2015-7-31 11:22:40 |阅读模式 | |
本帖最后由 流浪男 于 2015-7-31 11:25 编辑

马上建军节了,弄个引导页来美化下app吧。都说八月一号建军节放假两天,为什么呢?因为是周末!!!!


这个引导页是基于zepto.min.js和touch.js来实现的,然后结合css3动画效果,可以实现上下左右四个方向的滑动。
判断是否打开引导页的流程:


通过获取本地存储的一个值来判断是否打开引导页,若没有获取到,就执行一个打开引导页的方法,
apiready=function(){   
   var showGuide = $api.getStorage('showGuide');
    //打开引导页
    if(!showGuide){
        openGuide();
    }

}
//打开引导页
function openGuide(){
    api.openFrame({
        name: 'guide_frm',
        url: 'html/guide_frm.html',
        bounces: false,
        rect: {
            x: 0,
            y: 0,
            w: 'auto',
            h: 'auto'
        }
    });
}



guide_frm为打开的引导页,一般滑动到最后一屏时加个按钮,点击后写入本地一个值 $api.setStorage('showGuide','1');用来后面判断已经打开过引导页了,通过关闭当前frame,直接贴码


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>引导页</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style type="text/css">
.page {
    width:100%;
    height:100%;
    position:absolute;
    font-size:100px;
    text-align:center;
}
.page img {
    -webkit-animation: fadeIn .5s ease both;
    animation: fadeIn .5s ease both;
    margin-top: 20px;
    width: 100%;
}
.hide{ display:none;}
.page-current{
    z-index:1;
}
.page-1-1 { background: #1abc9c;}
.page-2-1 { background: #b071fe;}
.page-3-1 { background: #ff9900;}
.page-4-1 { background: #1abc9c;}
.btn {
    width: 200px;
    height: 50px;
    background: #ff9900;
    line-height: 50px;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 65%;
    margin-left: -100px;
    border-radius: 6px;
}
.pt-page-moveToLeft {
    -webkit-animation: moveToLeft .6s ease both;
    animation: moveToLeft .6s ease both;
}


.pt-page-moveFromLeft {
    -webkit-animation: moveFromLeft .6s ease both;
    animation: moveFromLeft .6s ease both;
}


.pt-page-moveToRight {
    -webkit-animation: moveToRight .6s ease both;
    animation: moveToRight .6s ease both;
}


.pt-page-moveFromRight {
    -webkit-animation: moveFromRight .6s ease both;
    animation: moveFromRight .6s ease both;
}


.pt-page-moveToTop {
    -webkit-animation: moveToTop .6s ease both;
    animation: moveToTop .6s ease both;
}


.pt-page-moveFromTop {
    -webkit-animation: moveFromTop .6s ease both;
    animation: moveFromTop .6s ease both;
}


.pt-page-moveToBottom {
    -webkit-animation: moveToBottom .6s ease both;
    animation: moveToBottom .6s ease both;
}


.pt-page-moveFromBottom {
    -webkit-animation: moveFromBottom .6s ease both;
    animation: moveFromBottom .6s ease both;
}
@-webkit-keyframes fadeIn {
    from { opacity: 0.3; }
    to {  }
}
/* move from / to  */


@-webkit-keyframes moveToLeft {
    from { }
    to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {
    from { }
    to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}


@-webkit-keyframes moveFromLeft {
    from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
    from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}


@-webkit-keyframes moveToRight {
    from { }
    to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight {
    from { }
    to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}


@-webkit-keyframes moveFromRight {
    from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {
    from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}


@-webkit-keyframes moveToTop {
    from { }
    to { -webkit-transform: translateY(-100%); }
}
@keyframes moveToTop {
    from { }
    to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}


@-webkit-keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}


@-webkit-keyframes moveToBottom {
    from { }
    to { -webkit-transform: translateY(100%); }
}
@keyframes moveToBottom {
    from { }
    to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}


@-webkit-keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); transform: translateY(100%); }
}


</style>
<body>
<div class="page page-1-1 page-current">
    <img src="../image/guide-1.png">
</div>
<div class="page page-2-1 hide">
    <img src="../image/guide-2.png">
</div>
<div class="page page-3-1 hide">
    <img src="../image/guide-3.png">
</div>
<div class="page page-4-1 hide">
    <img src="../image/guide-4.png">
    <div class="btn" tapmode>马上体验</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/touch.js"></script>


<script type="text/javascript" src="../script/guide.js"></script>
<script type="text/javascript">
    function go(){
        $api.setStorage('showGuide','1');
        api.closeFrame();
    }
    apiready = function(){
        api.parseTapmode();
    };
</script>
</html>

自己可以研究下guide.js,里面封装了上下左右四个方向的滑动判断

附件下载:



体验地址(轻户外)




本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

4

查看全部评分

主题:
7
帖子:
24
云币:
71
发表于 2015-8-30 15:43:17 |
到达最后一屏的时候,如果继续右滑或者下滑,会出现一白屏!

马路杀手

UID:48443

主题:
27
帖子:
206
云币:
451

一周年

发表于 2015-7-31 12:18:12 |
有没有遇到首页会闪现的。

主题:
1102
帖子:
5131
云币:
2147214885

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2015-7-31 11:26:19 |
大家苦求的引导页教程

业余车手

UID:22235

主题:
89
帖子:
1166
云币:
10259

版主勋章APICloud粉丝端午节

发表于 2015-7-31 11:26:59 |
抢首发!

主题:
8
帖子:
323
云币:
4029

中秋节APICloud粉丝女朋友单身狗

发表于 2015-7-31 11:28:42 |
赞一个

主题:
46
帖子:
4314
云币:
47923

足球狗APICloud粉丝连续签到100天一周年中秋节社会摇圣诞节老司机首长好!托马斯全旋女朋友不想上班!装逼侠单身狗锤子侠SB侠我李白贼6APICloud大会专属勋章不觉明厉强者王者狗年旺旺旺儿童节快乐

发表于 2015-7-31 11:29:21 |
赞~~~~~~~~~~~~~~~~~~~

主题:
24
帖子:
97
云币:
216
发表于 2015-7-31 11:30:15 |
赞~thanks for share~

主题:
59
帖子:
653
云币:
689

APICloud粉丝土豪版主勋章端午节

发表于 2015-7-31 11:36:15 |
利害啊,下一版本加入此功能,谢谢么么达,

主题:
6
帖子:
23
云币:
53
发表于 2015-7-31 11:49:32 |
赞赞赞~                           

驾校小白

UID:113867

主题:
0
帖子:
1
云币:
12
发表于 2015-7-31 14:15:03 |
赞赞赞!!!!!!!!!!!!!!!!!!
12345下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表