引导页制作

本文的引导页和[官方的引导页示例](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/guide.html)还是有一定的区别的。

页面的展示以图片为主，包括文字也已制作成图片

另外对首页和尾页分别添加了右滑和左滑事件，以保证页面背景和当前页背景是相同的，这样来确保样式的统一

http://www.cnblogs.com/phillyx/

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

				width: 100%;

				margin-left: 0px;

				margin-right: 0px;

				border: none;

			}

			a {

				height: 100%;

			}

			#into {

				bottom: 11%;

				position: absolute;

				width: 40%;

				height: 35px;

				text-align: center;

				left: 30%;

				padding: 0;

				border: 0;

				background: transparent;

				z-index: 100;

			}

			.img_content {

				position: relative;

				width: 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>

MUI - 引导页制作的更多相关文章

  1. HBuilder mui引导页制作

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

  2. mui 引导页

    引导页制作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  3. Onboard,迷人的引导页样式制作库

    简介 Onboard主要用于引导页制作,源码写的相当规范,值得参考. 项目主页: https://github.com/mamaral/Onboard 实例下载: https://github.com ...

  4. MUI框架-06-静态页制作（图片轮播）

    MUI框架-06-静态页制作(图片轮播) 轮播也是静态,是相对页面交互来说 上一篇介绍了如何设计一个简单的界面,还没有接触过,请先查看: MUI框架-01-介绍-创建项目-简单页面 轮播组件 之前也介 ...

  5. Xamarin.Android之引导页的简单制作

    0x01 前言 对于现在大部分的APP,第一次打开刚安装或更新安装的APP都会有几个引导界面,通常这几个引导页是告诉用户 APP有些什么功能或者修改了什么bug.新增了什么功能等等等. 下面就用Xam ...

  6. Android--ViewPager制作APP引导页

    ViewPager使用FragmentStatePagerAdapter做Adapter,引导页使用多Fragment形式. FragmentStatePagerAdapter代码如下: public ...

  7. ViewPager制作APP引导页+若干动画效果

    ViewPager使用FragmentStatePagerAdapter做Adapter,引导页使用多Fragment形式. 见http://www.cnblogs.com/bmbh/p/567276 ...

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

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

  9. Android引导页设计

    大家在安装好一个应用后,第一次打开时往往会出现一个使用引导页,形式一般为三.四张图片,随着我们的滑动进行切换,在最后一页会有一个进入应用的按钮,我们通过点击这个按钮可以进入应用,其实这其中没有太多的复 ...

随机推荐

  1. C++ base64 opencv Mat 转换

    static std::string base64Decode(const char* Data, int DataByte) { //解码表 const char DecodeTable[] = { ...

  2. Spring Cloud Alibaba迁移指南（一）：一行代码从 Hystrix 迁移到 Sentinel

    摘要: 本文对Hystrix.Resilience4j.Sentinel进行对比,并探讨如何使用一行代码这种极简的方式,将Hystrix迁移到Sentinel. Hystrix 自从前段时间 宣布停止 ...

  3. JS简单实现：根据奖品权重计算中奖概率实现抽奖的方法

    本文主要介绍:使用 JS 根据奖品权重计算中奖概率实现抽奖的方法. 一.示例场景 1.1.设置抽奖活动的奖项名称 奖项名称:["一等奖", "二等奖", &qu ...

  4. netbeans7.4 在项目内查找 快捷键 ctrl shift f

  5. JAVA邀请码生成器

    code import java.util.Random; /** * 邀请码生成器,算法原理:<br/> * 1) 获取id: 1127738 <br/> * 2) 使用自定 ...

  6. 依赖注入的方式（DI）

    方式: 接口注入: setter方法注入: 构造方法注入: 接口注入: public class ClassA { private InterfaceB clzB; public void doSom ...

  7. linux查看现在在运行的进程 $ pstree -a$ ps aux

    这都是查看现有进程的. ps aux 的结果比较杂乱 pstree -a 的结果比较简单明了,可以看到正在运行的进程及相关用户.

  8. Uva10817 Headmaster's Headache

    https://odzkskevi.qnssl.com/b506a3c20adad78678917d1ff4c9b953?v=1508327485 [题解] dp[i][S1][S2]表示前i个教师选 ...

  9. 洛谷P1080 [NOIP2012提高组D1T2]国王游戏 [2017年5月计划 清北学堂51精英班Day1]

    P1080 国王游戏 题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排 ...

  10. 【JZOJ5081】【GDSOI2017第三轮模拟】Travel Plan 背包问题+双指针+树的dfs序

    题面 100 注意到ban的只会是一个子树,所以我们把原树转化为dfs序列. 然后题目就转化为,询问一段ban的区间,之后的背包问题. 比赛的时候,我想到这里,于是就开始想区间合并,于是搞了线段树合并 ...