引导页制作

本文的引导页和[官方的引导页示例](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. 浅谈java.util.ConcurrentModificationException（并发修改异常）

    java中的list集合是我们经常使用的集合,而对集合进行增加和删除元素是我们最常用的操作.那么在什么时候对list集合什么样的操作,就会发生java.util.ConcurrentModificat ...

  2. 配置android studio环境

    配置java jdk 1.1运行exe 程序 1.2配置jdk 环境变量 添加环境变量 ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin .;%JAVA_HOME%\lib;% ...

  3. oracle function学习1

    oracle function学习基层: 函数就是一个有返回值的过程.  首先 知道oracle 使用限制:      函数调用限制: 1. SQL语句中只能调用存储函数(服务器端),而不能调用客户端 ...

  4. python 处理缺失值

  5. wordpress设置一个特定的页面作为首页

    首先在"页面"里新建一个页面,比如标题为"welcome"; 然后在设置里找到"阅读",首页显示调整为"一个静态页面", ...

  6. Data Lake Analytics账号和权限体系详细介绍

    一.Data Lake Analytics介绍 数据湖(Data Lake)是时下大数据行业热门的概念:https://en.wikipedia.org/wiki/Data_lake.基于数据湖做分析 ...

  7. 模拟21 题解（waiting）

    留坑待填 效率!!! 题还没改Oh,NO!!!

  8. ML面试1000题系列（91-100）

    本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 91 简单说说RNN的原理?我们升学到高三准备高 ...

  9. webpack学习之——Entry Points(入口起点)

    1.Entry property(entry属性) 1.1 Single Entry (Shorthand) Syntax(单个入口语法) 用法:entry: string | Array<st ...

  10. to_char 中fm

     1,有9的地方如果有数字就显示如果没有数字就不显示,有0的地方在没有数字的时候也会有0来占位 select to_char(9999.09556,'fm99999.0900'),to_char(99 ...