mui 引导页
引导页制作
<!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: %;
}
body {
margin: ;
}
.mui-content {
height: %;
padding: ;
}
.mui-slider {
height: %;
}
.mui-slider-group {
height: %;
}
.mui-slider-item {
height: %;
width: %;
margin-left: 0px;
margin-right: 0px;
border: none;
}
a {
height: %;
}
#into {
bottom: %;
position: absolute;
width: %;
height: 35px;
text-align: center;
left: %;
padding: ;
border: ;
background: transparent;
z-index: ;
}
.img_content {
position: relative;
width: %;
height: %;
}
.img_content img:first-child {
position: absolute;
top: %;
}
.img_content img:nth-child() {
position: absolute;
top: %;
}
.img_content img:last-child {
position: absolute;
bottom: %;
}
</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")[].addEventListener('tap', function() {
mui.fire(plus.webview.getLaunchWebview(), 'run');
//plus.webview.currentWebview().close();//等登录注册等页面显示之后再关闭
}); function initPageguid(){
//绑定滑屏相关事件
var gallery = mui('.mui-slider')[];
gallery.addEventListener('swiperight', function(e) {
//向左划动
var num = mui('.mui-slider').slider().getSlideNumber() - ;
setContainerBackg(num);
});
gallery.addEventListener('swipeleft', function(e) {
//向右划动
var num = mui('.mui-slider').slider().getSlideNumber() + ;
setContainerBackg(num);
});
} function setStatusBarBackgroud () {
if (mui.os.ios) {
plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
//提前设置登陆页背景颜色
plus.navigator.setStatusBarBackground("#3A75B8");
}
};
function setContainerBackg(num) {
//提前设置背景色
if (num == ) {
mui('.mui-content')[].style.backgroundColor = '#5dcbe2';
} else if (num == ) {
mui('.mui-content')[].style.backgroundColor = '#c1392b';
}
};
})
</script> </html>
mui 引导页的更多相关文章
- MUI - 引导页制作
引导页制作 本文的引导页和[官方的引导页示例](https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/guid ...
- HBuilder mui引导页制作
http://www.bcty365.com/content-146-2582-1.html
- wap2app（三）-- 添加引导页
1.在client_index.html文件中添加如下代码: <script type="text/javascript"> if(window.plus){ plus ...
- app添加引导页
1.设置guide.html 2.登陆或者主页面引用guide.html mui.plusReady(function() { //读取本地存储,检查是否为首次启动 决定是否显示引导页 var sho ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- iOS App引导页功能实现
一.写作原因 以前都没有想着来写点东西,今天遇到件事情让我决定每次还是要做记录.因为以前自己可以轻松的完成pod spec的配置,但是今天在做的时候还是忘了遇到了很多坑.pod spec配置遇到的坑不 ...
- 安卓第一次启动引导页使用ViewPager实现
我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等.一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单 ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ②)
距上一篇博客"APP引导页的高度集成 - DHGuidePageHUD - ①"的发布有一段时间了, 后来又在SDK中补充了一些新的内容进去但是一直没来得及跟大家分享, 今天来跟大 ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ①)
好长时间没更新博客, 是时候来一波干货分享了;APP引导页话不多说每一个APP都会用到,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了吧,当然这里讲的不是 ...
随机推荐
- Linux进程内存分析pmap命令
转自: http://blog.csdn.net/u013982161/article/details/52654256 名称: pmap - report memory map of a proce ...
- 使用 select 实现 goroutine 超时
虽然携程是Go语言中一个新的概念,嗯,但它本质上依然是属于多线程.超时机制是多线程中是一个非常重要的保障程序的鲁棒性的一个措施:错误是很难预估的,在多线程中更为显著,更容易出现难以预料的错误. 一个异 ...
- eclipse在注释时候字体变成繁体字
输入法和java中的快捷键冲突了,按下ctrl+shift+F就切换回去了
- tp5 中使用自定义扩展类和函数
如果是要引用其它控制器里定义的方法参考:https://www.cnblogs.com/efyefy/p/8796014.html 如果在extend定义的类和函数默认是在全局命名空间下的 new \ ...
- C++的STL之map自动排序特性
#include <iostream> #include <map> using namespace std; int main() {方法一: map<int,int& ...
- VC++ 使用ShellExecute函数调用邮箱客户端发送邮件(可以带附件)
之前写过一篇博文,通过MAPI实现调用邮箱客户端发送邮件带附件,当时对ShellExecute研究不深,以为ShellExecute不能带附件,因为项目需求原因(MAPI只能调用Foxmail和O ...
- topcoder srm 708 div1 -3
1.定义一个字符串s,定义函数$f(s)=\sum_{i=1}^{i<|s|}[s_{i-1}\neq s_{i}]$,给定字符串$p,q$,定义函数$g(p,q)=\sum_{c='a'}^{ ...
- Flask学习【第11篇】：整合Flask中的一些知识点
SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import datetime from sq ...
- 【BZOJ2724】【Violet 6】蒲公英
蒲公英/分块入门九Byhzwer 辣鸡我复制粘贴题面格式极其丑陋,各位看原题面啦. [题目描述] 在乡下的小路旁种着许多蒲公英,而我们的问题正是与这些蒲公英有关. 为了简化起见,我们把所有的蒲公英看成 ...
- loj#2305. 「NOI2017」游戏 2-sat
链接 https://loj.ac/problem/2305 https://www.luogu.org/problemnew/show/P3825 思路 3-sat神马的就不要想了,NP问题 除去x ...