<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style>
#close1 {
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;
}
</style>
</head>
<body style="background-color: white;">
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<!-- 第一张 -->
<!--<div class="mui-slider-item" style="text-align: center;">
<div style="top:15%;position: relative;font-size: 2em;color: #DAA520;letter-spacing:2px;">
<div>全球好课</div>
<div style="margin-top:3px">尽在指间</div>
</div>
<div style="width:100%;">
<img style="width:90%;top: 140px;position: relative;" src="../images/guide/01_02.jpg" />
</div>
<div style="bottom: 30px;position: absolute;width:100%;">
<img style="width:40%;" src="../images/guide/01_05.jpg" />
</div>
</div>-->
<!-- 第二张 -->
<!--<div class="mui-slider-item" style="text-align: center;">
<div style="top:10%;position: relative;font-size: 2em;color: #DAA520;">
追求梦想的道路很漫长
</div>
<div style="width:100%;">
<img style="width:90%;top: 140px;position: relative;" src="../images/guide/02_02.jpg" />
</div>
<div style="bottom: 30px;position: absolute;width:100%;">
<img style="width:40%;" src="../images/guide/01_05.jpg" />
</div>
</div>-->
<!-- 第三张 -->
<div class="mui-slider-item" style="text-align: center;">
<div style="top: 60px;position: absolute;width:100%;">
<img style="width:40%;" src="../images/logo/logo.png" />
</div>
<div style="top:50%;position: relative;font-size: 2em;color: #DAA520;">
这一刻，你不愿再等待
</div>
<div style="width: 100%;position: absolute;bottom: 40px;">
<button style="" id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
</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>
</div>
<script src="../js/mui.min.js"></script>
<script>
mui.back = function() {};
mui.plusReady(function() {
if (mui.os.ios) {
plus.navigator.setFullscreen(true);
}
plus.navigator.closeSplashscreen();
});
//立即体验按钮点击事件
document.getElementById("close").addEventListener('tap', function(event) {
mui.openWindow({
id: 'index-win',
url: '../index.html',
show: {
duration: 200
}
});
}, 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);
}
});
</script>
</body>
</html>