guide.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="css/common/mui.min.css" rel="stylesheet" />
  8. <style type="text/css">
  9. body {
  10. background-color: black;
  11. }
  12. .guide-img {
  13. width: 100%;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="mui-content">
  19. <div class="mui-slider mui-fullscreen">
  20. <div class="mui-slider-group">
  21. <div class="mui-slider-item">
  22. <a href="javascript:;">
  23. <img class="guide-img" src="img/guide/tell@2x.png">
  24. </a>
  25. </div>
  26. <div class="mui-slider-item">
  27. <a href="javascript:;">
  28. <img class="guide-img" src="img/guide/work@2x.png">
  29. </a>
  30. </div>
  31. <div id="start" class="mui-slider-item">
  32. <a href="javascript:;">
  33. <img class="guide-img" src="img/guide/share@2x.png">
  34. </a>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <script src="libs/mui.min.js"></script>
  40. <script type="text/javascript">
  41. mui.init();
  42. function plusReady() {
  43. /**
  44. * 获取系统状态栏高度
  45. * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight
  46. */
  47. var sh = plus.navigator.getStatusbarHeight();
  48. /**
  49. * 获取设备屏幕高度分辨率以及宽度分辨率
  50. * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionHeight
  51. * http://www.html5plus.org/doc/zh_cn/device.html#plus.screen.resolutionWidth
  52. */
  53. var h = plus.screen.resolutionHeight;
  54. var w = plus.screen.resolutionWidth;
  55. /**
  56. * 设置图片高度,这里图片并不规范;
  57. * 实际开发中,建议大家制作iphone6plus规格的图片;
  58. */
  59. var imgs = document.querySelectorAll(".guide-img");
  60. for(var i = 0, len = imgs.length; i < len; i++) {
  61. imgs[i].style.height = h + "px";
  62. imgs[i].style.width = w + "px";
  63. }
  64. /**
  65. * 手动关闭启动页
  66. * http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.closeSplashscreen
  67. */
  68. plus.navigator.closeSplashscreen();
  69. document.getElementById("start").addEventListener("tap", function() {
  70. /**
  71. * 向本地存储中设置launchFlag的值,即启动标识;
  72. * http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem
  73. */
  74. plus.storage.setItem("launchFlag", "true");
  75. mui.openWindow({
  76. url: "login.html",
  77. id: "main",
  78. waiting: {
  79. autoShow: false, //自动显示等待框,默认为true
  80. },
  81. show: {
  82. autoShow: true, //页面loaded事件发生后自动显示,默认为true
  83. duration: 500,
  84. aniShow: 'fade-in'
  85. },
  86. });
  87. });
  88. };
  89. if(window.plus) {
  90. plusReady();
  91. } else {
  92. document.addEventListener('plusready', plusReady, false);
  93. }
  94. /**
  95. * 重写mui.back(),什么都不执行,反之用户返回到入口页;
  96. */
  97. mui.back = function() {};
  98. </script>
  99. </body>
  100. </html>