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的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了吧,当然这里讲的不是 ...
随机推荐
- csrf_token（跨站伪造）
Django跨站请求伪造 跨站请求伪造(Cross-site request forgery),也被称为one-click attack或者session riding,通常缩写为CSRF或者XSR ...
- 被fancybox坑的心路历程
今天项目中需要使用fancybox来展示图片,但是使用中发现fancybox没起作用,点击图片直接刷新了页面! fancybox的原理是通过给a标签绑定事件,使得a标签不在是直接跳转链接,而是把链接中 ...
- 【python027--集合】
一.集合会剔除字典内重复的数字 >>> num = {1,2,3,3,4,5,5,6}>>> num{1, 2, 3, 4, 5, 6}>>> t ...
- luogu1975 [国家集训队]排队
思路 序列中 |i | 1| 2| 3| 4| 5| 6| 7| 8| 9| 10| |----|--|--|--|--|--|--|--|--|--|--| |a[i]| a| b| c| L| d ...
- kubeadm 生成的token过期后，集群增加节点
通过kubeadm初始化后,都会提供node加入的token: You should now deploy a pod network to the cluster. Run "kubect ...
- ActiveMQ安装使用
入门: https://www.cnblogs.com/cyfonly/p/6380860.html http://www.uml.org.cn/zjjs/201802111.asp https:// ...
- CentOS 7.3 上安装docker
Docker,分为社区版CE和企业版EE.社区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外的收费服务. 一.安装docker 1.Docker 要求 CentOS 系统的内核版本高于 3 ...
- P4363 [九省联考2018]一双木棋chess
思路 容易发现只能在轮廓线的拐点处落子,所以棋盘的状态可以用一个n+m长度的二进制数表示 转移就是10变成01 代码 #include <cstdio> #include <algo ...
- kubernetes 实战5_命令_Assign Pods to Nodes&Configure a Pod to Use a ConfigMap
Assign Pods to Nodes how to assign a Kubernetes Pod to a particular node in a Kubernetes cluster. Ad ...
- 火狐对 min-height 的支持
代码: <!DOCTYPE html> <style> .com-center-banner { background: #f00; } .com-center-banner ...