引导页制作

本文的引导页和[官方的引导页示例](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. Coreutils - GNU core utilities

    coreutils 是GNU下的一个软件包,包含linux下的 ls等常用命令.这些命令的实现要依赖于shell程序.一般在系统中都默认安装,也可自己安装或更新.例如,安装coreutils-6.7. ...

  2. npm config set registry 与 cnpm的区别

    一直以为这2个事没有区别的: npm config set registry http://registry.npm.taobao.org 后使用npm命令. npm install -g cnpm ...

  3. linux在线用户管理

    LINUX是个多用户系统,一旦连接到网络中,它可以同时为多个登录用户提供服务.系统管理员可以随时了解系统中有那些用户,用户都在进行什么操作. 1.查看该系统在线用户 系统管理员若想知道某一时刻用户的行 ...

  4. 使用koa-body中间件后DELETE请求中ctx.request.body内容为空

    gitbook浏览此随笔 出现场景 在使用koa-body 做文件上传的时候,发现使用DELETE请求时,request.body中的内容为空对象{} app.js //code... const K ...

  5. 适配器模式--在NBA我需要翻译

     适配器模式:将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 在软件开发中,也就是系统的数据和行为都正确,但接口不符时,我们应 ...

  6. eclipse 代码格式化快捷键CTRL SHIFT F无反应的解决办法

    基本上就是被其他软件占用了,比如输入法的简繁体切换,改其他软件,保留eclipse就好

  7. Linux ifconfig 配置网络接口

    Linux ifconfig 可以用来配置网络接口的IP地址.掩码.网关.物理地址等:值得一说的是用Linux ifconfig 为网卡指定IP地址,这只是用来调试网络用的,并不会更改系统关于网卡的配 ...

  8. NOIP模拟 7.01

    水灾(sliker.cpp/c/pas) 1000MS  64MB 大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的地方都将会被洪水淹没. CCY ...

  9. Django多业务模块的写法

    from django.shortcuts import render # Create your views here. from django.shortcuts import HttpRespo ...

  10. QT_获取运行进程所在目录路径_1

    QString getProcessPathForWin(int idProcess) { #ifdef Q_OS_WIN // access process path WCHAR name[]; Z ...