引导页制作

本文的引导页和[官方的引导页示例](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. Leetcode199. Binary Tree Right Side View二叉树的右视图

    给定一棵二叉树,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值. 示例: 输入: [1,2,3,null,5,null,4] 输出: [1, 3, 4] 解释: 先求深度,中 ...

  2. spring深入学习(六)-----springmvc

    MVC设计模式 有过一定开发经验的人肯定都知道这个模式,先简单介绍下这种模式,然后再去讨论为啥要这么设计: 传统的web应用中应该主要包括这些组件,不同组件负责不同的模块. 数据实体:POJO 数据层 ...

  3. jquery 获取图片宽高为0的问题

    原理:页面加载完了,图片不一定加载完了. $(function(){ $("img").on("load",function(){ //核心 var w = $ ...

  4. 基础篇-1.5Java的数组

    1 引言 每一种编程语言都有其自身的数组概念,大同小异,都是为了存储一堆数据,而Java的数组是用来存储相同类型的数据,如声明一个arr[10]数组,可以用来代替声明10个变量. 2 声明和创建数组 ...

  5. P5562 [Celeste-B]Center of the Earth 题解

    构造 因为题目只要求两位相同,所以可以暴力枚举这两位所有的可能性,方案数为\(O(n^2)\). 但是,这么做是显然不优的,因为完全没有用到第三位. 观察题目条件:n为偶数. 就想一想能不能奇数偶数分 ...

  6. Leetcode661.Image Smoother图片平滑器

    包含整数的二维矩阵 M 表示一个图片的灰度.你需要设计一个平滑器来让每一个单元的灰度成为平均灰度 (向下舍入) ,平均灰度的计算是周围的8个单元和它本身的值求平均,如果周围的单元格不足八个,则尽可能多 ...

  7. Nacos Committers 团队首亮相，发布 0.9.0 版本

    223 天,发布 14 个版本,19 位 Committers,39 位 Contributors. 在宣布开源后的第 223 天,Nacos 发布了其第14个版本 - 0.9.0,该版本提升了 Na ...

  8. 模拟19 题解（waiting）

    T1,千万别转化成链了!! 直接数就可以,dfs搜索每种情况,对于搜到的点,如果子树大小过大,直接return,相等说明可以,小的话向上累加, 优化是先预处理子树大小,若子树小,不用搜了直接加上就行 ...

  9. webpack--安装，使用

    1. webpack 1.1. webpack介绍 webpack是一个资源的打包工具,目前最新为webpack3,可以将 .js, .css , image等静态资源当做一个模块来进行打包,那么每一 ...

  10. 转：VMware中CentOS配置静态IP进行网络访问（NAT方式和桥接模式）

    传送门:http://blog.csdn.net/zhangatle/article/details/77417310 其实这个博主的博客最是适合新手学习,踩过的坑让我再踩一踩,印象深刻 首先进行NA ...