您的位置：首页 > 产品设计 > UI/UE

MUI - 引导页制作

2015-07-14 14:01 465 查看

引导页制作

本文的引导页和[官方的引导页示例](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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航