mui 引导页 guide.html index.html

最新推荐文章于 2019-07-25 00:06:00 发布

YKP.TOSTRING

最新推荐文章于 2019-07-25 00:06:00 发布

阅读量653

点赞数

CC 4.0 BY-SA版权

分类专栏：程序员

本文链接：https://blog.youkuaiyun.com/qq_40981281/article/details/84306809

程序员专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了一款移动端应用中滑动广告动画的实现过程，包括使用MUI框架进行页面布局，通过CSS动画实现元素的动态展示效果，以及利用JavaScript处理用户交互逻辑，如返回键的双击退出应用和图片切换时的动画触发。文章还展示了如何通过本地存储判断应用是否为首次启动，并据此决定显示引导页还是直接进入首页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<style>
#close {
position: absolute;
width: 160px;
left: 50%;
margin-left: -80px;
bottom: 15%;
padding: 10px;
color: #fff;
border-color: #fff;
}
.item-logo {
width: 100%;
height: 100%;
position: relative;
}
.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: 15%;
left: 50%;
margin-left: -100px;
}
.animate {
position: absolute;
left: 0;
bottom: 15%;
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>
</head>

<body>
<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
<div class="mui-slider-group">

<div class="mui-slider-item">
<div class="item-logo" style="background-color: #D74B28">
<a href="#">
GAC
</a>
<div class="animate guide-show">
<h2 class="animated bounceInDown">小巧高能</h2>
<li class="animated bounceInLeft">几十K的JS和CSS</li>
<li class="animated bounceInRight">上百种控件样式和模板</li>
</div>
</div>
</div>

<div class="mui-slider-item">
<div class="item-logo" style="background-color: #02C1ED;">
<a href="#">
GAC
</a>
<div id="tips-2" class="animate mui-hidden">
<h2 class="animated bounceInDown">原生UI</h2>
<li class="animated bounceInLeft">以iOS原生UI为基础</li>
<li class="animated bounceInRight">补充Android特有样式</li>
</div>
</div>
</div>

<div class="mui-slider-item">
<div class="item-logo" style="background-color: #67C962;">
<a href="#">
GAC
</a>
<div id="tips-3" class="animate mui-hidden">
<h2 class="animated bounceInDown">流畅体验</h2>
<li class="animated bounceInLeft">下拉刷新、转场动画</li>
<li class="animated bounceInRight">整个世界都流畅了</li>
</div>
</div>
</div>

<div class="mui-slider-item">
<div class="item-logo" style="background-color: #FCD208;">
<a href="#">
GAC
</a>
<div class="animate">
<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
</div>
</div>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
     //处理逻辑：2秒内，连续两次按返回键，则退出应用
            var first = null;
mui.back = function() {
                 if(!first){
                        first = new Date().getTime();
                        mui.toast('再按一次退出应用');
                        setTimeout(function(){
                            first = null;
                        },2000);
                    } else {
                            if(new Date().getTime() - first < 2000){
                                plus.runtime.quit();
                    }
                 }
};
mui.plusReady(function() {
if(mui.os.ios){
plus.navigator.setFullscreen(true);
}
plus.navigator.closeSplashscreen();
});
//立即体验按钮点击事件
document.getElementById("close").addEventListener('tap', function(event) {
plus.storage.setItem("launchFlag", "true");
// plus.navigator.setFullscreen(false);
// plus.webview.currentWebview().close();//关闭自身，防止返回
               mui.openWindow({
               id:"login",
                   url:'./html/jac-login.html',
                   waiting:{
                   autoShow:false
               },
               extras:{
                       createNew:true
                   }
               });
}, 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>
</body>

</html>