|
利用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,里面封装了上下左右四个方向的滑动判断
附件下载:
体验地址(轻户外)
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|