lzf
/
djfp-app


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>引导页</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">
		<link rel="stylesheet" href="../../css/animate.min.css">
		<style>
			body{color: white;}
			.item-logo{text-align: center;}
			.img{width: 75%!important;}
			.animate{text-align: center;line-height: 25px;}
			li{list-style:none;}
			#close{margin-top: 30px;color: white;border: 1px solid white;border-radius: 20px;width: 100px;}
		</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" style="background-color: #ff6822;">
					<div class="item-logo">
						<img src="../../images/guide1.png" class="img" />
						<div id="tips-1" class="animate">
							<h2 class="animated bounceInDown">哔啵上线啦</h2>
							<li class="animated bounceInLeft" style="padding-top:5px;">理想还是要有的</li>
							<li class="animated bounceInLeft">万一实现了呢</li>
						</div>
					</div>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item" style="background-color: #009688;">
					<div class="item-logo">
						<img src="../../images/guide2.png" class="img" />
						<div id="tips-2" class="animate mui-hidden">
							<h2 class="animated bounceInDown">不期而遇的惊喜</h2>
							<li class="animated rollIn" style="padding-top:5px;">我们从不生产二次元</li>
							<li class="animated rollIn">我们只是二次元的搬运工</li>
						</div>
					</div>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item" style="background-color:#234555;">
					<div class="item-logo">
						<img src="../../images/guide2.png" class="img" />
						<div class="animate">
							<div id="tips-3" class="animate mui-hidden">
								<h2 class="animated bounceInDown">二次元的共享衣橱</h2>
								<li class="animated bounceInLeft" style="padding-top:5px;">为你破开次元壁</li>
								<button id='close' class="mui-btn mui-btn-warning mui-btn-outlined animated rollIn">立即体验</button>
							</div>
						</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>
		</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) {
				plus.storage.setItem("lauchFlag", "true");
				plus.navigator.setFullscreen(false);
				localStorage.setItem("first","first");
				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("animate");
					}
				}
			});
		</script>
	</body>

</html>