引导页制作

本文的引导页和[官方的引导页示例](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. TZOJ 4651 zry和他的的灯泡们(lca)

    描述 zry有一个收集灯泡的习惯,他把灯泡的阴极都共地,阳极连成一颗树,这样的话,他只要在任意一个灯泡的阳极加上合适的电压,所有灯泡都能亮起来.不幸的是,有一对灯泡之间的阳极连线断掉了,这样的话,这颗 ...

  2. UVA11389 The Bus Driver Problem

        题意:有司机,下午路线,晚上路线各n个.给每个司机恰好分配一个下午路线和晚上路线.给出行驶每条路线的时间,如果司机开车时间超过d,则要付加班费d*r.问如何分配路线才能使加班费最少.   贪心 ...

  3. angular依赖注入(2)——注入器的使用

    一.显示注入器 injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Tires]); let car = injector.get ...

  4. PHP的安全性问题，你能说得上几个？

    一.SQL注入 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意)的SQL命令 ...

  5. Delphi 设计模式：《HeadFirst设计模式》Delphi7代码---命令模式之SimpleRemoteWithUndoTest[转]

    命令模式可以很轻松的实现撤销(Undo)功能. 命令的接受者:  1unit uReceiveObject;  2  3interface  4  5type  6  TLight = class(T ...

  6. leetcode 839 Similar String Groups

    题目 Two strings X and Y are similar if we can swap two letters (in different positions) of X, so that ...

  7. 2019-9-2-win10-uwp-存放网络图片到本地

    title author date CreateTime categories win10 uwp 存放网络图片到本地 lindexi 2019-09-02 12:57:38 +0800 2018-2 ...

  8. 一个宽度不确定的DIV里放三个水平对齐的DIV，左右两个DIV宽度固定为100px，中间那个DIV自适应宽度

    方法一:浮动  注意三个div的位置 <html><head> <meta charset="utf-8"> <style type=&q ...

  9. 【linux配置】Linux系统下安装rz/sz命令以及使用说明

    Linux系统下安装rz/sz命令以及使用说明 对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务器上下载文件到本地,rz / sz命令很方便的帮我们实现了这个功能,但是很 ...

  10. Python中 sys.argv的用法简明解释

    Python中 sys.argv[]的用法简明解释 sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个“外部”很关键,所以那些试图从代码来说明它作用的解释一直没看明白.因为我们从外部取得 ...