APP html{ height:100%; } body{ p

APP



html{
height:100%;
}
body{
padding: 0;
margin:0;
height:100%;
}
.swipe{
width:100%;
height:100%;
position: relative;
overflow: hidden;
}
.swipe-wrap{
width:100%;
overflow: hidden;
position: relative;
}
.no1{
background: url(../image/1.0.jpg) no-repeat;
}
.no2{
background: url(../image/2.0.jpg) no-repeat;
}
.no3{
background: url(../image/3.0.jpg) no-repeat;
}
.no4{
background: url(../image/4.0.jpg) no-repeat;
}
.no5{
background: url(../image/5.0.jpg) no-repeat;
}
.no1,.no2,.no3,.no4,.no5{
width:100%;
height:100%;
position: relative;
background-size: 100% 100%;
background-position: center center;
}
img{
width:100%;
height:100%;
opacity: 0;
}
.pic3{
position: absolute;
top:0;
left:0;
z-index:20;
}
.arrow{
width:20%;
height:5%;
position: absolute;
bottom: 5% ;
left:40%;
z-index: 30;
}
.btn1{
width:90%;
height:10%;
display: block;
position: absolute;
bottom: 35%;
left:5%;
opacity: 0;
z-index: 30;
background: url(../image/btn-1.png) no-repeat;
background-size:100% 100%;

}
.btn2{
width:90%;
height:10%;
display: block;
position: absolute;
bottom: 20%;
left:5%;
z-index: 30;
opacity: 0;
background: url(../image/btn-3.png) no-repeat;
background-size:100% 100%;
}
@-webkit-keyframes page{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes page{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes pic{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes pic{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes arrow{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes arrow{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes btn1{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes btn1{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes btn2{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes btn2{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.active .pic2{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
}
.active .pic3{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
-webkit-animation-delay:1s;
animation-delay:1s;
}
.active .btn1{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
-webkit-animation-delay:1s;
animation-delay:1s;
}
.active .btn2{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
-webkit-animation-delay:1.5s;
animation-delay:2s;
}
.active .arrow{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
-webkit-animation-delay:2s;
animation-delay:2s;
}
.down1{
background: url(../image/btn-2.png) no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
.down2{
background: url(../image/btn-4.png) no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
































apiready = function(){
api.setStatusBarStyle({
style: 'light'
});
api.startPlay({
path: 'widget://res/AllOfMe.mp3'
},function(){});
var movieList = $api.dom('#slider .swipe-wrap');
$api.dom('.no1').classList.add('active');
window.swipeInit = function(){
window.movingUnit = new Moving(
movieList,
{
dir: 'y',
transEndFn: function() {
switch(movingUnit.currentPoint){
case 1:
$api.addCls($api.dom('.no2'),'active');
break;
case 2:
$api.addCls($api.dom('.no3'),'active');
break;
case 3:
$api.addCls($api.dom('.no4'),'active');
break;
case 4:
$api.addCls($api.dom('.no5'),'active');
break;
default:
break;
}
}
}
);
};
swipeInit();
};
function sendSms(result){
api.sms({
numbers: [''],
text: result
},function(ret, err){
if(ret.status){
} else{
}
});
}

結果 (中文) 1:

应用程序
html{
height:100%;
}
body{
padding: 0;
margin:0;
height:100%;
}
.swipe{
width:100%;
height:100%;
position: relative;
overflow: hidden;
}
.swipe-wrap{
width:100%;
overflow: hidden;
position: relative;
}
.no1{
background: url(../image/1.0.jpg) no-repeat;
}
.no2{
background: url(../image/2.0.jpg) no-repeat;
}
.no3{
background: url(../image/3.0.jpg) no-repeat;
}
.no4{
background: url(../image/4.0.jpg) no-repeat;
}
.no5{
background: url(../image/5.0.jpg) no-repeat;
}
.no1,.no2,.no3,.no4,.no5{
width:100%;
height:100%;
position: relative;
background-size: 100% 100%;
background-position: center center;
}
img{
width:100%;
height:100%;
opacity: 0;
}
.pic3{
position: absolute;
top:0;
left:0;
z-index:20;
}
.arrow{
width:20%;
height:5%;
position: absolute;
bottom: 5% ;
left:40%;
z-index: 30;
}
.btn1{
width:90%;
height:10%;
display: block;
position: absolute;
bottom: 35%;
left:5%;
opacity: 0;
z-index: 30;
background: url(../image/btn-1.png) no-repeat;
background-size:100% 100%;

}
.btn2{
width:90%;
height:10%;
display: block;
position: absolute;
bottom: 20%;
left:5%;
z-index: 30;
opacity: 0;
background: url(../image/btn-3.png) no-repeat;
background-size:100% 100%;
}
@-webkit-keyframes page{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes page{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes pic{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes pic{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes arrow{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes arrow{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes btn1{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes btn1{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes btn2{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes btn2{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.active .pic2{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
}
.active .pic3{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
-webkit-animation-delay:1s;
animation-delay:1s;
}
.active .btn1{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
-webkit-animation-delay:1s;
animation-delay:1s;
}
.active .btn2{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
-webkit-animation-delay:1.5s;
animation-delay:2s;
}
.active .arrow{
-webkit-animation: page 5s forwards;
animation: page 5s forwards;
-webkit-animation-delay:2s;
animation-delay:2s;
}
.down1{
background: url(../image/btn-2.png) no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
.down2{
background: url(../image/btn-4.png) no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}


apiready = function(){
api.setStatusBarStyle({
style: 'light'
});
api.startPlay({
path: 'widget://res/AllOfMe.mp3'
},function(){});
var movieList = $api.dom('#slider .swipe-wrap');
$api.dom('.no1').classList.add('active');
window.swipeInit = function(){
window.movingUnit = new Moving(
movieList,
{
dir: 'y',
transEndFn: function() {
switch(movingUnit.currentPoint){
case 1:
$api.addCls($api.dom('.no2'),'active');
break;
case 2:
$api.addCls($api.dom('.no3'),'active');
break;
case 3:
$api.addCls($api.dom('.no4'),'active');
break;
case 4:
$api.addCls($api.dom('.no5'),'active');
break;
default:
break;
}
}
}
);
};
swipeInit();
};
function sendSms(result){
api.sms({
numbers: [''],
text: result
},function(ret, err){
if(ret.status){
} else{
}
});
}

結果 (中文) 3:

<！DOCTYPE HTML HTML
< > >

<元字符集=“UTF-8”>

<名称>应用程序> /标题>
<链接rel=“样式表”type=“文本/ CSS“href =“/ CSS / API。CSS”/>
<链接rel=“样式表”type=“文本/ CSS“href =“/ CSS /普通。CSS”/>
<风格>
HTML {
高度：100%；
}
体{
填充：0；
保证金：0；
身高：100%；
}
。刷卡{
宽度：100%；高度：100%
；
位置：相对；
溢出：隐藏；
}
。刷卡包{
宽度：100%；
溢出：隐藏；
位置：相对；
} {
。第一
背景：URL（.. /图像/ 1。JPG）不重复；
}
。NO2 {
背景：URL（/图像/ 2。JPG）不重复；
}
。NO3 {
背景：URL（/图像/ 3。JPG）不重复；

}。{四
背景：URL（/图像/ 4。JPG）不重复；
}
。5 {
背景：URL（/图像/ 5。JPG）不重复；
}
。NO1，NO2，NO3，。。。4，5。{
宽度：100%；高度：100%
；
位置：相对
背景尺寸：100%；100%；
背景位置：中心
}；
IMG {
宽度：100%；高度：100%
；
不透明度：0；
} {
。图
位置：绝对的；
顶：0；
左：0；
Z指数：20；
}
。箭{
宽度：20%；高度：5%；

位置：绝对的；
底：5%；40%；

左：Z指数：30；
}
。BTN1 {
宽度：90%；高度：10%
；
显示：块；
位置：绝对的；
底：35%；
左：5%；
透明度：0；
Z指数：30；
背景：URL（/图像/ btn-1。PNG）没有重复
背景尺寸：100%；100%；

}
。BTN2 {
宽度：90%；高度：10%
；
显示：块；
位置：绝对的；
底：20%；
左：5%；
Z指数：30；
不透明度：0；
背景：URL（/图像/ btn-3。PNG）不重复；
背景尺寸：100% 100%；
}
@ WebKit帧页{
0% {
透明度：0；
}
100% {
不透明度：1；} }


@帧页{
0% {
透明度：0；
}
100% {
不透明度：1；

} }
@ WebKit帧PIC {
0% {
透明度：0；
}
100% {
不透明度：1；} }


@帧照片{
0% {
透明度：0；
}
100% {
不透明度：1；} }


@帧箭{
0% {
不透明度：0；
} {

100%不透明度：1；} }


@箭{
WebKit的关键帧0% {
不透明：0；
}
100% {
不透明度：1；} }


@ WebKit的关键帧
BTN1 { 0% {
透明度：0；
}
100% {
不透明度：1；} }


@帧BTN1 {
0% {
不透明度：0；
} {

100%不透明度：1；} }


@ WebKit的关键帧
BTN2 { 0% {
透明度：0；
}
100% {
不透明度：1；} }


@帧BTN2 {
0% {
透明度：0；
}
100% {
不透明度：1
} }；

。主动。pic2 {
WebKit的动画：页面5S了
动画：页面5S前锋；
}
。活跃。图{
WebKit的动画：动画：
5S转发页面；页面5S前锋；
WebKit的动画延迟：1秒；
动画延迟：1秒；
}
。活跃。BTN1 {
WebKit的动画：页面5S前锋；
网页动画：5S前锋；
WebKit的动画延迟：1秒；
动画延迟：1秒；
}
。主动。BTN2 {
WebKit的动画：页面5S前锋；
动画：页面转发
5S；WebKit的动画延迟：1.5s；
动画延迟：2S；
}
。活跃。箭{
Webkit网页动画：5S了；
动画：页面5S前锋；
WebKit的动画延迟：2S；
动画延迟：2S；
}
。下{
背景：URL（/图像/ btn-2。PNG）不重复；
WebKit的背景尺寸：100% 100%；
背景尺寸：100% 100%；
}
。down2 {
背景：URL（/图像/ btn-4。PNG）不重复；
WebKit的背景尺寸：100% 100%；
背景尺寸：100% 100%；
}
< /风格>
< /头>
<体>

＜div class=“第一”>
< IMG类=“pic2”src=“/图像/ 1.2。png”>
< IMG class=“图”src=“/图像/ 1.3。png”>
< IMG class=“箭”src=“/图像/箭。GIF”>
< / DIV
＜div＞class=“NO”>
< IMG class=“pic2”src=“/图像/ 2.2。png”>
< IMG class=“图”src=“/图像/ 2.3。png”>
< IMG class=“箭”src=“/图像/箭。GIF”>
< / DIV >
＜div class=“NO”>
< IMG class=“pic2”src=“/图像/ 3.2。png”>
< IMG class=“图”src=“/图像/ 3.3。png”>
< IMG class=“箭”src=“/图像/箭。GIF”>
< / DIV >
＜div class=“4”>
< IMG class=“pic2”src=“/图像/ 4.2。png”>
< IMG class=“图”src=“/图像/ 4.3。png”>
< IMG class=“箭”src=“../图像/箭。GIF”>
< / DIV >
< / DIV >
< / DIV >
< /体”
<脚本type=“text/javascript”src=“/脚本/ API。JS”> < /脚本>
<脚本type=“text/javascript”src=“/脚本/移动。JS”> < /脚本>
<脚本type=“text/javascript”>

apiready = function() {
API。setstatusbarstyle（{
风格：“光”
}）；
API。startplay（{
路径：“Widget：/ /树脂/ allofme。MP3的
}，function() { }）；
VaR movielist = API美元。DOM（'#滑块。刷包'）；
DOM API美元。（“。一”）。列表。添加（主动的）；
window.swipeinit = function() {
window.movingunit =新的运动（
movielist，
{
导演：“Y”，
transendfn：function() {
开关（movingunit。找到）{
案例1：
API（API addcls美元。美元。DOM（'。NO2），主动'）；
打破；
案例2：
API（API addcls美元。美元。DOM（'。NO3”），活动的）；
打破；
案例3：
API addcls美元（美元。DOM API。（'。4号），主动
'）；打破
；案例4：
API（API addcls美元。美元。DOM（'。五号），主动'）；
打破；
默认：
打破；
} } }


）；
}；
swipeinit()；
}；
函数SendSMS（结果）{
API。短信（{
编号：[’]，
文本：结果
}，功能（RET，ERR）{
如果（ret.status）{ } { }
其他

}）；
}
< /脚本/ HTML
< > >