利用touch.js实现滑动引导页（上下左右四个滑动方向）

流浪男

本帖最后由流浪男于 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，里面封装了上下左右四个方向的滑动判断

附件下载：

体验地址（轻户外）

James+Allen

到达最后一屏的时候，如果继续右滑或者下滑，会出现一白屏！

jessic

有没有遇到首页会闪现的。

YonBIP社区

大家苦求的引导页教程

huguoba

抢首发！

loveDlhd

赞一个

lcj231700764

赞~~~~~~~~~~~~~~~~~~~

蔚蓝海域

赞~thanks for share~

ACFans51

利害啊，下一版本加入此功能，谢谢么么达，

别岸惊鸿

赞赞赞~

raver

赞赞赞!!!!!!!!!!!!!!!!!!