请问hellow 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">  

        <link rel="stylesheet" href="../css/mui.min.css">  
        <style>  
            #close {  
                position: absolute;  
                width: 160px;  
                left: 50%;  
                margin-left: -80px;  
                bottom: 15%;  
                padding: 10px;  
                color: #fff;  
                border-color: #fff;  
            }  
            .item-logo {  
                width: 100%;  
                height: 100%;  
                position: relative;  
            }  
            .item-logo a {  
                width: 200px;  
                height: 200px;  
                display: block;  
                border: 1px solid #FFFFFF;  
                border-color: rgba(255, 255, 255, 0.5);  
                text-align: center;  
                line-height: 200px;  
                border-radius: 50%;  
                font-size: 40px;  
                color: #fff;  
                position: absolute;  
                top: 15%;  
                left: 50%;  
                margin-left: -100px;  
            }  
            .animate {  
                position: absolute;  
                left: 0;  
                bottom: 15%;  
                width: 100%;  
                color: #fff;  
                display: -moz-box;  
            }  
            .animate h2 {  
                text-align: center;  
                margin-bottom: 20px;  
            }  
            .animate li {  
                width: 50%;  
                height: 30px;  
                line-height: 30px;  
                list-style: none;  
                font-size: 16px;  
                text-align: right;  
            }  
            .animate li:nth-child(3) {  
                text-align: left;  
                float: right;  
            }  
            .animated {  
                -webkit-animation-duration: 1s;  
                -webkit-animation-play-state: paused;  
                -webkit-animation-fill-mode: both;  
            }  
            .guide-show .bounceInDown {  
                -webkit-animation-name: bounceInDown;  
                -webkit-animation-play-state: running;  
                -webkit-animation-delay: 1s;  
                display: block;  
            }  
            .guide-show .bounceInLeft {  
                -webkit-animation-name: bounceInLeft;  
                display: block;  
                -webkit-animation-play-state: running;  
            }  
            .guide-show .bounceInRight {  
                -webkit-animation-name: bounceInRight;  
                display: block;  
                -webkit-animation-play-state: running;  
                -webkit-animation-delay: 0.5s;  
            }  
            @-webkit-keyframes bounceInDown {  
                0%, 60%, 75%, 90%, 100% {  
                    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
                }  
                0% {  
                    opacity: 0;  
                    -webkit-transform: translate3d(0, -3000px, 0);  
                    transform: translate3d(0, -3000px, 0);  
                }  
                60% {  
                    opacity: 1;  
                    -webkit-transform: translate3d(0, 25px, 0);  
                    transform: translate3d(0, 25px, 0);  
                }  
                75% {  
                    -webkit-transform: translate3d(0, -5px, 0);  
                    transform: translate3d(0, -5px, 0);  
                }  
                90% {  
                    -webkit-transform: translate3d(0, 3px, 0);  
                    transform: translate3d(0, 3px, 0);  
                }  
                100% {  
                    -webkit-transform: none;  
                    transform: none;  
                }  
            }  
            @-webkit-keyframes bounceInLeft {  
                0%, 60%, 75%, 90%, 100% {  
                    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
                }  
                0% {  
                    opacity: 0;  
                    -webkit-transform: translate3d(-3000px, 0, 0);  
                    transform: translate3d(-3000px, 0, 0);  
                }  
                60% {  
                    opacity: 1;  
                    -webkit-transform: translate3d(25px, 0, 0);  
                    transform: translate3d(25px, 0, 0);  
                }  
                75% {  
                    -webkit-transform: translate3d(-10px, 0, 0);  
                    transform: translate3d(-10px, 0, 0);  
                }  
                90% {  
                    -webkit-transform: translate3d(5px, 0, 0);  
                    transform: translate3d(5px, 0, 0);  
                }  
                100% {  
                    -webkit-transform: none;  
                    transform: none;  
                }  
            }  
            @-webkit-keyframes bounceInRight {  
                0%, 60%, 75%, 90%, 100% {  
                    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
                }  
                0% {  
                    opacity: 0;  
                    -webkit-transform: translate3d(3000px, 0, 0);  
                    transform: translate3d(3000px, 0, 0);  
                }  
                60% {  
                    opacity: 1;  
                    -webkit-transform: translate3d(-25px, 0, 0);  
                    transform: translate3d(-25px, 0, 0);  
                }  
                75% {  
                    -webkit-transform: translate3d(10px, 0, 0);  
                    transform: translate3d(10px, 0, 0);  
                }  
                90% {  
                    -webkit-transform: translate3d(-5px, 0, 0);  
                    transform: translate3d(-5px, 0, 0);  
                }  
                100% {  
                    -webkit-transform: none;  
                    transform: none;  
                }  
            }  
        </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">  
                    <div class="item-logo" style="background-color: #D74B28">  
                        <a href="#">  
                        MUI  
                        </a>  
                        <div class="animate guide-show">  
                            <h2 class="animated bounceInDown">小巧高能</h2>  
                            <li class="animated bounceInLeft">几十K的JS和CSS</li>  
                            <li class="animated bounceInRight">上百种控件样式和模板</li>  
                        </div>  
                    </div>  
                </div>  
                <!-- 第二张 -->  
                <div class="mui-slider-item">  
                    <div class="item-logo" style="background-color: #02C1ED;">  
                        <a href="#">  
                        MUI  
                        </a>  
                        <div id="tips-2" class="animate mui-hidden">  
                            <h2 class="animated bounceInDown">原生UI</h2>  
                            <li class="animated bounceInLeft">以iOS原生UI为基础</li>  
                            <li class="animated bounceInRight">补充Android特有样式</li>  
                        </div>  
                    </div>  
                </div>  
                <!-- 第三张 -->  
                <div class="mui-slider-item">  
                    <div class="item-logo" style="background-color: #67C962;">  
                        <a href="#">  
                        MUI  
                        </a>  
                        <div id="tips-3" class="animate mui-hidden">  
                            <h2 class="animated bounceInDown">流畅体验</h2>  
                            <li class="animated bounceInLeft">下拉刷新、转场动画</li>  
                            <li class="animated bounceInRight">整个世界都流畅了</li>  
                        </div>  
                    </div>  
                </div>  
                <!-- 第四张 -->  
                <div class="mui-slider-item">  
                    <div class="item-logo" style="background-color: #FCD208;">  
                        <a href="#">  
                        MUI  
                        </a>  
                        <div class="animate">  
                            <button id='close' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>  
                        </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 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);  
                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(""+index);  
                    if(item.classList.contains("mui-hidden")){  
                        item.classList.remove("mui-hidden");  
                        item.classList.add("guide-show");  
                    }  
                }  
            });  

        </script>  
    </body>  

</html>

秦仙游 (作者)

谢谢啊，请问这个guide页面，是只会在第一次打开程序的时候执行是吗？还是自己得设置哪些地方。

2015-09-02 23:37

蔡繁荣 - 发表是最好的记忆

hello mui

秦仙游 (作者)

好吧，hellow hello 和 hellow傻傻分不清楚

2015-09-02 22:08

好冷 - 诚接外包,QQ:23380891

hello mui

DCloud_UNI_CHB

看hello mui项目中guide.html，使用的实际是图片轮播组件，只是将其变成全屏了。

秦仙游 (作者)

请问guide.html默认就会在第一次启动的时候执行是吗？

2015-09-02 23:36
秦仙游 (作者)

回复秦仙游:还是说，得自己去程序里判断是不是首次打开程序呢？

2015-09-02 23:37

小闹

index.html是默认进入的首页，在该页判断

mui.plusReady(function() {  
    //读取本地存储，检查是否为首次启动  
    var showGuide = plus.storage.getItem("lauchFlag");  
    if(showGuide){  
        //有值，说明已经显示过了，无需显示  
    }else{  
        //显示启动导航  
        mui.openWindow({  
            id:'guide',  
            url:'examples/guide.html'  
        });  
    }  
});

秦仙游 (作者)

谢谢亲

2015-09-03 00:58
5***@qq.com

请问下我第二次打开showGuide 还是显示为null，这个是怎么回事，lauchFlag值是哪里来的呀！

2018-03-09 11:23

chender - 与人为善

说实话，这个功能体验很差，配置高的手机也不流畅

请问hellow mui每次安装时的那个滑动欢迎界面是怎么做的呢？

6 个回复

公告

相关问题

请问hellow mui每次安装时的那个滑动欢迎界面是怎么做的呢？

与内容相关的链接

6 个回复

公告

相关问题