Skip to content

M
mui
Commit da3186df authored by hbcui1984's avatar hbcui1984
Browse files
Options

优化hello mui启动导航图

parent b4679bae
Hide whitespace changes
Inline Side-by-side
Showing with 235 additions and 62 deletions
examples/hello-mui/examples/guide.html
View file @ da3186df
...@@ -10,15 +10,6 @@ ...@@ -10,15 +10,6 @@
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<style> <style>
.mui-slider-item, .mui-slider-item a {
width: 100%;
height: 100%;
}
.mui-slider-item a img{
width: 100%;
min-height: 100%;
}
#close { #close {
position: absolute; position: absolute;
width: 160px; width: 160px;
...@@ -29,58 +20,212 @@ ...@@ -29,58 +20,212 @@
color: #fff; color: #fff;
border-color: #fff; border-color: #fff;
} }
.animate{position: absolute;left: 0;bottom: 150px;width: 100%;color: #fff;display: -moz-box;} .item-logo {
.animate h2{text-align: center;margin-bottom: 20px;} width: 100%;
.animate li{width: 50%;height:30px;line-height: 30px;list-style: none;font-size: 16px;} height: 100%;
.animate li{text-align: right;} position: relative;
.animate li:nth-child(3){text-align: left;float: right;} }
.item-logo a {
width: 200px;
height: 200px;
display: block;
border: 1px solid #FFFFFF;
border-color: rgba(255, 255, 255, 0.5);
text-align: center;
line-height: 200px;
border-radius: 50%;
font-size: 40px;
color: #fff;
position: absolute;
top: 100px;
left: 50%;
margin-left: -100px;
}
.animate {
position: absolute;
left: 0;
bottom: 150px;
width: 100%;
color: #fff;
display: -moz-box;
}
.animate h2 {
text-align: center;
margin-bottom: 20px;
}
.animate li {
width: 50%;
height: 30px;
line-height: 30px;
list-style: none;
font-size: 16px;
text-align: right;
}
.animate li:nth-child(3) {
text-align: left;
float: right;
}
.animated {
-webkit-animation-duration: 1s;
-webkit-animation-play-state: paused;
-webkit-animation-fill-mode: both;
}
.guide-show .bounceInDown {
-webkit-animation-name: bounceInDown;
-webkit-animation-play-state: running;
-webkit-animation-delay: 1s;
display: block;
}
.guide-show .bounceInLeft {
-webkit-animation-name: bounceInLeft;
display: block;
-webkit-animation-play-state: running;
}
.guide-show .bounceInRight {
-webkit-animation-name: bounceInRight;
display: block;
-webkit-animation-play-state: running;
-webkit-animation-delay: 0.5s;
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
90% {
-webkit-transform: translate3d(0, 3px, 0);
transform: translate3d(0, 3px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes bounceInLeft {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
</style> </style>
</head> </head>
<body> <body>
<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;"> <div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
<div class="mui-slider-group"> <div class="mui-slider-group">
<!-- 第一张 --> <!-- 第一张 -->
<div class="mui-slider-item"> <div class="mui-slider-item">
<a href="#"> <div class="item-logo" style="background-color: #D74B28">
<img id="guilde1" src="../images/guide-1.png"> <a href="#">
<div class="animate"> MUI
<h2>小巧高能</h2> </a>
<li>几十K的JS和CSS</li> <div class="animate guide-show">
<li>上百种控件样式和模板</li> <h2 class="animated bounceInDown">小巧高能</h2>
</div> <li class="animated bounceInLeft">几十K的JS和CSS</li>
</a> <li class="animated bounceInRight">上百种控件样式和模板</li>
</div>
</div>
</div> </div>
<!-- 第二张 --> <!-- 第二张 -->
<div class="mui-slider-item"> <div class="mui-slider-item">
<a href="#"> <div class="item-logo" style="background-color: #02C1ED;">
<img src="../images/guide-2.png"> <a href="#">
<div class="animate"> MUI
<h2>原生UI</h2> </a>
<li>以iOS原生UI为基础</li> <div id="tips-2" class="animate mui-hidden">
<li>补充Android特有样式</li> <h2 class="animated bounceInDown">原生UI</h2>
</div> <li class="animated bounceInLeft">以iOS原生UI为基础</li>
</a> <li class="animated bounceInRight">补充Android特有样式</li>
</div>
</div>
</div> </div>
<!-- 第三张 --> <!-- 第三张 -->
<div class="mui-slider-item"> <div class="mui-slider-item">
<a href="#"> <div class="item-logo" style="background-color: #67C962;">
<img src="../images/guide-3.png"> <a href="#">
<div class="animate"> MUI
<h2>流畅体验</h2> </a>
<li>下拉刷新、转场动画</li> <div id="tips-3" class="animate mui-hidden">
<li>整个世界都流畅了</li> <h2 class="animated bounceInDown">流畅体验</h2>
</div> <li class="animated bounceInLeft">下拉刷新、转场动画</li>
</a> <li class="animated bounceInRight">整个世界都流畅了</li>
</div>
</div>
</div> </div>
<!-- 第四张 --> <!-- 第四张 -->
<div class="mui-slider-item"> <div class="mui-slider-item">
<a href="#"> <div class="item-logo" style="background-color: #FCD208;">
<img src="../images/guide-4.png"> <a href="#">
<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button> MUI
</a> </a>
<div class="animate">
<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
</div>
</div>
</div> </div>
</div> </div>
<div class="mui-slider-indicator"> <div class="mui-slider-indicator">
...@@ -92,23 +237,35 @@ ...@@ -92,23 +237,35 @@
</div> </div>
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script> <script>
mui.back = function(){}; mui.back = function() {};
mui.plusReady(function () { mui.plusReady(function() {
//设置宽高 //设置宽高
plus.navigator.setFullscreen(true); plus.navigator.setFullscreen(true);
document.getElementById("guilde1").style.height = plus.screen.resolutionHeight + "px";
document.getElementById("guilde1").offsetHeight;
//关闭splash页面； //关闭splash页面；
setTimeout(function () { setTimeout(function() {
plus.navigator.closeSplashscreen(); plus.navigator.closeSplashscreen();
},10); }, 10);
var enterButton = document.getElementById("close");
enterButton.addEventListener('tap', function(event) {
plus.storage.setItem("lauchFlag","true");
plus.navigator.setFullscreen(false);
plus.webview.currentWebview().close();
}, false);
}); });
//立即体验按钮点击事件
document.getElementById("close").addEventListener('tap', function(event) {
plus.storage.setItem("lauchFlag", "true");
plus.navigator.setFullscreen(false);
plus.webview.currentWebview().close();
}, false);
//图片切换时，触发动画
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的；
var index = event.detail.slideNumber+1;
if(index==2||index==3){
var item = document.getElementById("tips-"+index);
if(item.classList.contains("mui-hidden")){
item.classList.remove("mui-hidden");
item.classList.add("guide-show");
}
}
});
</script> </script>
</body> </body>
......
examples/hello-mui/examples/setting.html
View file @ da3186df
...@@ -455,6 +455,9 @@ ...@@ -455,6 +455,9 @@
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a id="rate" class="mui-navigate-right">评分鼓励</a> <a id="rate" class="mui-navigate-right">评分鼓励</a>
</li> </li>
<li class="mui-table-view-cell">
<a id="welcome" class="mui-navigate-right">欢迎页</a>
</li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a id="share" class="mui-navigate-right">分享推荐</a> <a id="share" class="mui-navigate-right">分享推荐</a>
</li> </li>
...@@ -603,7 +606,6 @@ ...@@ -603,7 +606,6 @@
mui.toast('Hello MUI 已是最新版本~') mui.toast('Hello MUI 已是最新版本~')
} }
}); });
}); });
var view = viewApi.view; var view = viewApi.view;
(function($) { (function($) {
...@@ -713,7 +715,21 @@ ...@@ -713,7 +715,21 @@
document.getElementById("head-img1").addEventListener('tap',function (e) { document.getElementById("head-img1").addEventListener('tap',function (e) {
e.stopPropagation(); e.stopPropagation();
});
document.getElementById("welcome").addEventListener('tap',function (e) {
//显示启动导航
mui.openWindow({
id:'guide',
url:'guide.html',
show:{
aniShow:'fade-in',
duration:300
},
waiting:{
autoShow:false
}
});
}); });
function initImgPreview () { function initImgPreview () {
......
examples/hello-mui/list.html
View file @ da3186df
...@@ -487,7 +487,7 @@ ...@@ -487,7 +487,7 @@
}else{ }else{
//显示启动导航 //显示启动导航
mui.openWindow({ mui.openWindow({
id:'guilde', id:'guide',
url:'examples/guide.html', url:'examples/guide.html',
show:{ show:{
aniShow:'none' aniShow:'none'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment