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的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了吧,当然这里讲的不是 ...
随机推荐
- springboot 项目pom.xml文件基本配置
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...
- vue 学习一些好的文档网址推荐
相关文章 1. vue.js 2.x 文档 http://cn.vuejs.org https://vue.docschina.org/ 2. npm https://www.npmjs.com ...
- Codeforces 235C Cyclical Quest - 后缀自动机
Some days ago, WJMZBMR learned how to answer the query "how many times does a string x occur in ...
- topcoder srm 310 div1
problem1 link 先计算出最上面.最下面一层,根据最上面一层的数量计算答案. import java.util.*; import java.math.*; import static ja ...
- topcoder srm 697 div1 -3
1.给定长度为$n$ 的数组$b$,构造长度为$n$ 的且没有重复元素的数组$a$,令$p_{i}$表示$a$中除$a_{i}$外其他元素的乘积.构造出的$a$满足$a_{i}^{b_{i}}$能够被 ...
- 如何 使用vim的 session和viminfo 恢复上一次工作的环境??
使用vim的 session和viminfo 恢复上一次工作的环境, 主要有两个方面的内容需要保存: 要使用session,保存窗口和视图, 及全局设置 要使用viminfo保存 命令行历史, 搜索历 ...
- Spring-Cache 注解 @Cacheable,@CachePut , @CacheEvict
1.自动生成key @Bean public KeyGenerator keyGenerator() { return new KeyGenerator() { @Override public Ob ...
- asp.net tag
https://forums.asp.net/t/1139381.aspx?what+are+these+special+tags+and+ 答案1 Those tags can be hard to ...
- cat查看文件以及sed查看指定行数
https://unix.stackexchange.com/questions/288521/with-the-linux-cat-command-how-do-i-show-only-certai ...
- ASP.NET Core2.1 中如何使用 Cookie和Session
https://blog.csdn.net/canduecho/article/details/80651853 ASP.NET Core2.1的官方项目模板在创建的Razor Pages和MVC项目 ...