yf_zd
/
yfApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body {
				background-color: #fff;
			}
			
			.guide-img {
				width: 100%;
			}
			
			#start {
				position: absolute;
			    bottom: 1.8em;
			    border-radius: 30px;
			    width: 99px;
			    left: 50%;
			    margin-left: -54px;
			}
			.mui-slider-indicator{
				bottom: 1.8em;
			}
			.mui-slider-indicator .mui-indicator,.mui-indicator.mui-active,.mui-slider-indicator .mui-active.mui-indicator{
				background: #1895cd;
				box-shadow:none;
			}
			.mui-slider-indicator .mui-indicator{
				width: 10px;
				height: 10px;
			}
			.mui-indicator.mui-active{
				width: 30px;
				border-radius: 30px;
			}
			.mui-btn-green{
				color: #1c9acd;
    			border: 1px solid #1c9acd;
			}
			.mui-btn-green:enabled:active{
				color: #fff;
    			border: 1px solid #1c9acd;
    			background-color: #1c9acd;
			}
			.mui-btn-outlined.mui-btn-green{
				color: #1c9acd;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-slider mui-fullscreen">
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						<a href="javascript:;">
							<img class="guide-img" src="../images/guidePage1.jpg">
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="javascript:;">
							<img class="guide-img" src="../images/guidePage2.jpg">
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="javascript:;">
							<img class="guide-img" src="../images/guidePage3.jpg">
							<button class="mui-btn mui-btn-green mui-btn-outlined" type="button" id="start">开始体验</button>
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator" id="sliderIndicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				/**
				 * 获取系统状态栏高度
				 * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight
				 */
				var sh = plus.navigator.getStatusbarHeight();
				/**
				 * 获取设备屏幕高度分辨率以及宽度分辨率
				 * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionHeight
				 * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionWidth
				 */
				var h = plus.screen.resolutionHeight;
				var w = plus.screen.resolutionWidth;
				/**
				 * 设置图片高度，这里图片并不规范；
				 * 实际开发中，建议大家制作iphone6plus规格的图片；
				 */
				var imgs = document.querySelectorAll(".guide-img");
				for(var i = 0, len = imgs.length; i < len; i++) {
					imgs[i].style.height = (h - sh) + "px";
					imgs[i].style.width = w + "px";
				}
				/**
				 * 手动关闭启动页
				 * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen
				 */
				plus.navigator.closeSplashscreen();
				document.getElementById("start").addEventListener("tap", function() {
					/**
					 * 向本地存储中设置launchFlag的值，即启动标识；
					 * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem
					 */
					plus.storage.setItem("launchFlag", "true");
					mui.openWindow({
						url: "login.html",
						id: "login",
						extras: {
							mark: "gudie" //同样，这里也只是个标识，实际开发中并不用；
						}
					});
				});
			});
			//最后一页不显示指示器
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
				if(event.detail.slideNumber == 2){
					document.getElementById('sliderIndicator').style.display = 'none';
				}else{
					document.getElementById('sliderIndicator').style.display = 'block';
				}
			});
			/**
			 * 重写mui.back()，什么都不执行，反之用户返回到入口页；
			 */
			var clickNum = 0;
			mui.back = function() {
				clickNum++;
				if(clickNum > 1) {
					plus.runtime.quit();
				} else {
					mui.toast("再按一次退出应用");
				}
				setTimeout(function() {
					clickNum = 0
				}, 1000);
				return false;
			};
		</script>
	</body>

</html>