引导页制作

<!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: %;

            }

            body {

                margin: ;

            }

            .mui-content {

                height: %;

                padding: ;

            }

            .mui-slider {

                height: %;

            }

            .mui-slider-group {

                height: %;

            }

            .mui-slider-item {

                height: %;

                width: %;

                margin-left: 0px;

                margin-right: 0px;

                border: none;

            }

            a {

                height: %;

            }

            #into {

                bottom: %;

                position: absolute;

                width: %;

                height: 35px;

                text-align: center;

                left: %;

                padding: ;

                border: ;

                background: transparent;

                z-index: ;

            }

            .img_content {

                position: relative;

                width: %;

                height: %;

            }

            .img_content img:first-child {

                position: absolute;

                top: %;

            }

            .img_content img:nth-child() {

                position: absolute;

                top: %;

            }

            .img_content img:last-child {

                position: absolute;

                bottom: %;

            }

        </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")[].addEventListener('tap', function() {

                mui.fire(plus.webview.getLaunchWebview(), 'run');

                //plus.webview.currentWebview().close();//等登录注册等页面显示之后再关闭

            }); 

            function initPageguid(){

                //绑定滑屏相关事件

                var gallery = mui('.mui-slider')[];

                gallery.addEventListener('swiperight', function(e) {

                    //向左划动

                    var num = mui('.mui-slider').slider().getSlideNumber() - ;

                    setContainerBackg(num);

                });

                gallery.addEventListener('swipeleft', function(e) {

                    //向右划动

                    var num = mui('.mui-slider').slider().getSlideNumber() + ;

                    setContainerBackg(num);

                });

            }

            function setStatusBarBackgroud () {

                if (mui.os.ios) {

                    plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");

                    //提前设置登陆页背景颜色

                    plus.navigator.setStatusBarBackground("#3A75B8");

                }

            };

            function setContainerBackg(num) {

                //提前设置背景色

                if (num == ) {

                    mui('.mui-content')[].style.backgroundColor = '#5dcbe2';

                } else if (num == ) {

                    mui('.mui-content')[].style.backgroundColor = '#c1392b';

                }

            };

        })

    </script>

</html>

mui 引导页的更多相关文章

  1. MUI - 引导页制作

    引导页制作 本文的引导页和[官方的引导页示例](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/guid ...

  2. HBuilder mui引导页制作

    http://www.bcty365.com/content-146-2582-1.html

  3. wap2app（三）-- 添加引导页

    1.在client_index.html文件中添加如下代码: <script type="text/javascript"> if(window.plus){ plus ...

  4. app添加引导页

    1.设置guide.html 2.登陆或者主页面引用guide.html mui.plusReady(function() { //读取本地存储,检查是否为首次启动 决定是否显示引导页 var sho ...

  5. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  6. iOS App引导页功能实现

    一.写作原因 以前都没有想着来写点东西,今天遇到件事情让我决定每次还是要做记录.因为以前自己可以轻松的完成pod spec的配置,但是今天在做的时候还是忘了遇到了很多坑.pod spec配置遇到的坑不 ...

  7. 安卓第一次启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等.一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单 ...

  8. iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ②)

    距上一篇博客"APP引导页的高度集成 - DHGuidePageHUD - ①"的发布有一段时间了, 后来又在SDK中补充了一些新的内容进去但是一直没来得及跟大家分享, 今天来跟大 ...

  9. iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ①)

    好长时间没更新博客, 是时候来一波干货分享了;APP引导页话不多说每一个APP都会用到,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了吧,当然这里讲的不是 ...

随机推荐

  1. lasticsearch -2.3.x head插件安装（windows系统）

    1.进入命令行: home键+R 命令: > cd \elasticsearch根目录\bin\ > plugin  install  mobz/elasticsearch-head 2. ...

  2. Java程序员必备的Intellij插件（长期更新，截止到2018-05-03)

    善用Intellij插件可大幅提升我们的效率 以下是我用过不错的Intellij插件 1. .ignore 生成各种ignore文件,一键创建git ignore文件的模板,免得自己去写 截图:   ...

  3. Cannot add foreign key constraint @ManyToMany @OneToMany

    最近在使用shiro做权限管理模块时,使用的时user(用户)-role(角色)-resource(资源)模式,其中user-role 是多对多,role-resource 也是多对多.但是在使用sp ...

  4. 如何查看linux程序被何种版本的编译器编译的？

    答: 使用vi工具之间搜索关键字"GCC"即可找出编译该程序的编译器版本号!

  5. CodeForces 459C Pashmak and Buses（构造）题解

    题意:n个人,k辆车,要求d天内任意两人都不能一直在同一辆车,能做到给出构造,不能输出-1 思路:我们把某一个人这d天的车号看成一个d位的数字,比如 1 1 2 3代表第一天1号车.第二天1号车.第三 ...

  6. 【系列教程1】Gradle入门系列三：依赖管理

    在现实生活中,要创造一个没有任何外部依赖的应用程序并非不可能,但也是极具挑战的.这也是为什么依赖管理对于每个软件项目都是至关重要的一部分. 这篇教程主要讲述如何使用Gradle管理我们项目的依赖,我们 ...

  7. Ubuntu14.04 clang3.8 Installation Guide

    Reference Installing clang 3.8 on Ubuntu 14.04.3. Ubuntu14.04 clang3.8 Installation Guide 1.add the ...

  8. DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并

    传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果.         首先讲讲三层 ...

  9. 每天一个小程序—第0001题（uuid模块）

    第 0001 题:  做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券),使用 Python 如何生成 200 个激活码(或者优惠券)? 一开始以为是 ...

  10. POJ 3693 Maximum repetition substring（连续重复子串）

    http://poj.org/problem?id=3693 题意:给定一个字符串,求重复次数最多的连续重复子串. 思路: 这道题确实是搞了很久,首先枚举连续子串的长度L,那么子串肯定包含了r[k], ...