zoukankan      html  css  js  c++  java
  • mui 引导页

    引导页制作

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <title></title>
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">
            <link href="../css/mui.min.css" rel="stylesheet" />
            <style>
                html,
                body {
                    height: 100%;
                }
                body {
                    margin: 0;
                }
                .mui-content {
                    height: 100%;
                    padding: 0;
                }
                .mui-slider {
                    height: 100%;
                }
                .mui-slider-group {
                    height: 100%;
                }
                .mui-slider-item {
                    height: 100%;
                     100%;
                    margin-left: 0px;
                    margin-right: 0px;
                    border: none;
                }
                a {
                    height: 100%;
                }
                #into {
                    bottom: 11%;
                    position: absolute;
                     40%;
                    height: 35px;
                    text-align: center;
                    left: 30%;
                    padding: 0;
                    border: 0;
                    background: transparent;
                    z-index: 100;
                }
                .img_content {
                    position: relative;
                     100%;
                    height: 100%;
                }
                .img_content img:first-child {
                    position: absolute;
                    top: 15%;
                }
                .img_content img:nth-child(2) {
                    position: absolute;
                    top: 30%;
                }
                .img_content img:last-child {
                    position: absolute;
                    bottom: 10%;
                }
            </style>
        </head>
    
        <body>
            <div class="mui-content" style="height: 100%;overflow: hidden;padding: 0px;margin: 0px;background-color: #5dcbe2;">
                <div id="slider" class="mui-slider">
                    <div class="mui-slider-group">
                        <!-- 第一张 -->
                        <div class="mui-slider-item" style="background-color: #5dcbe2;">
                            <div class="img_content">
                                <img src="../images/welcome/text1.png" />
                                <img src="../images/welcome/1.png">
                            </div>
    
                        </div>
    
                        <!-- 第二张 -->
                        <div class="mui-slider-item" style="background-color: #68d8b0;">
                            <div class="img_content">
                                <img src="../images/welcome/text2.png" />
                                <img src="../images/welcome/2.png">
                            </div>
                        </div>
                        <!-- 第三张-->
    
                        <div class="mui-slider-item" style="background-color: #c1392b;">
                            <div class="img_content">
                                <img src="../images/welcome/text3.png" />
                                <img src="../images/welcome/3.png">
                                <button id="into"></button>
                                <img src="../images/welcome/btnin.png">
    
                            </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>
    
            </div>
            </div>
        </body>
        <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script> 
        <script type="text/javascript" charset="utf-8">
            mui.init();
            mui.plusReady(function(){           
                mui.os.ios&&plus.navigator.setFullscreen(true);         
                var slider = mui('.mui-slider').slider();           
                initPageguid();         
                setStatusBarBackgroud();            
                plus.navigator.closeSplashscreen();
                mui("#into")[0].addEventListener('tap', function() {                                
                    mui.fire(plus.webview.getLaunchWebview(), 'run');
                    //plus.webview.currentWebview().close();//等登录注册等页面显示之后再关闭               
                }); 
                
                function initPageguid(){
                    //绑定滑屏相关事件
                    var gallery = mui('.mui-slider')[0];
                    gallery.addEventListener('swiperight', function(e) {
                        //向左划动
                        var num = mui('.mui-slider').slider().getSlideNumber() - 1;
                        setContainerBackg(num);
                    });
                    gallery.addEventListener('swipeleft', function(e) {
                        //向右划动
                        var num = mui('.mui-slider').slider().getSlideNumber() + 1;
                        setContainerBackg(num);
                    });
                }
                
                function setStatusBarBackgroud () {
                    if (mui.os.ios) {
                        plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
                        //提前设置登陆页背景颜色
                        plus.navigator.setStatusBarBackground("#3A75B8");
                    }
                };
                function setContainerBackg(num) {
                    //提前设置背景色
                    if (num == 0) {
                        mui('.mui-content')[0].style.backgroundColor = '#5dcbe2';
                    } else if (num == 2) {
                        mui('.mui-content')[0].style.backgroundColor = '#c1392b';
                    }
                };
            })      
        </script>
    
    </html>
  • 相关阅读:
    sqlHelp.java
    IIS7.0 检测到在集成的托管管道模式下不适用的ASP.NET设置 的解决方法
    [转]安装程序在安装此软件包时遇到一个错误,这可能表示此软件包有错。错误码是29506
    单表中的sql语句
    网页::::无法访问请求的页面,因为该页的相关配置数据无效。
    <authentication mode="Windows"/>
    无法从传输连接中读取数据: 远程主机强迫关闭了一个现有的连接。这个错误很难判断错在哪里,刚开……
    [转] css实现透明度(兼容IE6、IE7、Firefox2.0)
    企业微信机器人消息发送
    阴阳历自动转换工具函数
  • 原文地址:https://www.cnblogs.com/jessical626/p/6894583.html
Copyright © 2011-2022 走看看