html+mui实现引导页

<!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">

<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 zoomImage" style="background-color:black;">
                       <a href="#" >
                           MYSISE
                       </a>
                       <div class="animate guide-show" style="color: white;font-weight: bold;">

                           <h2 class="animated bounceInDown" style="font-size: 50px;">小巧高能</h2>
                           <li class="animated bounceInLeft" style="font-size: 22px;">几十K的JS和CSS</li>
                           <li class="animated bounceInRight"style="font-size: 15px;">上百种控件样式和模板</li>
                       </div>
                            <div class="animate-btn">
                           <button id='close' class="mui-btn mui-btn-warning headline_title_btn">点击跳过</button>
                       </div>

                   </div>
               </div>

           </div>
           <div class="mui-slider-indicator">
               <div class="mui-indicator mui-active"></div>
           </div>
       </div>
       <script src="mui-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);
//               plus.webview.currentWebview().close();
               goto();
           }, 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");
                   }
               }
           });

           function countSecond(SecondTime,Id) {
               if(SecondTime==undefined)return;
               if(Id==undefined)return;

               Time = SecondTime;
               //启动计时器，1秒执行一次
               //timer变量，控制时间
               var InterValObj = window.setInterval(function() {
               document.getElementById(Id).innerHTML = "点击跳过 "+Time+"s";
               if(Time == 0) {
                   window.clearInterval(InterValObj); //停止计时器
//                   window.location.href = 'home.html';
                   return;
               }
               Time--;
           }, 1000);
           }
           countSecond(10,"close");
           function goto(){
               window.location.href = 'home.html';
           }
       </script>
   </body>

</html>

html+mui实现引导页

猜你喜欢