我使用.mui-fullscreen .mui-slider-item > a {top: 50%;transform: translateY(-50%);来显示图片,但是图片的位置不是垂直居中,感觉是图片顶部在50%的地方,而不是中心位置,这是为什么呢?而且使用使用了fullscreen,页面放大后,图片的左右都会丢失一部分,无法挪动。
小闹
- 发布:2014-12-30 16:17
- 更新:2014-12-30 17:35
- 阅读:2290
你好,我想请问一个关于fullscreen的问题
分类:MUI
小闹 (作者)
在前一个页面
var win = plus.webview.create("show-img.html","show-img.html",{scalable:true});
win.show("zoom-fade-out",300);
show-img.html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title></title>
<!-- CSS -->
<link href="css/mui.min.css" rel="stylesheet"/>
<style>
html,
body {
background-color: #000;
}
</style>
<!-- JS -->
<script src="js/mui.min.js"></script>
</head>
<body>
<div class="mui-content" id="back">
<div class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<div class="mui-slider-item">
<a href="#">
<img src="images/cbd.jpg" />
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/shuijiao.jpg" />
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/yuantiao.jpg" />
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="images/muwu.jpg" />
</a>
</div>
</div>
</div>
</div>
<script>
mui.init({
swipeBack: false,
});
document.getElementById('back').addEventListener('tap', function() {
mui.currentWebview.close();
});
</script>
</body>
</html>
小闹 (作者)
全屏显示的居中图片,双指放大缩小,真机是IPHONE5
2014-12-30 16:46