css - 怎么用H5实现这样一个悬浮的图片浏览器呢？
本文介绍了css - 怎么用H5实现这样一个悬浮的图片浏览器呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如图，这样的图片浏览器怎么做啊，我前端很菜，玩不动，求大牛帮帮忙！！
解决方案
因为我是在MUI中使用这个功能，然后我就直接将MUI的popover和slider结合了一下来实现了功能
效果如下：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/jquery.min.js"></script>
<style type="text/css">
.mui-popover-arrow {
display: none;
}
#PopoverPicContainer {
top: calc(50% - 125px) !important;
}
.mui-slider-indicator .mui-icon {
border: 0;
}
</style>
</head>
<body>
<a id="poppicContainer" href="#PopoverPicContainer" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">弹出图片预览幻灯片</a>
<div id="PopoverPicContainer" class="mui-popover" style="height: 250px;">
<div class="mui-slider" style="margin-top: calc(50% - 105px);">
<div class="mui-slider-group mui-slider-loop" style="text-align: center;">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div>
</a>
</li>
</ul>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一个图文表格) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div>
</a>
</li>
</ul>
</div>
</div>
<div class="mui-slider-indicator" style="position: static;background-color: #fff;">
<span class="mui-action mui-action-previous mui-icon mui-icon-back" style="float: left ;"></span>
<div class="mui-number">
<span>1</span> / 2
</div>
<span class="mui-action mui-action-next mui-icon mui-icon-forward" style="float: right;"></span>
</div>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script>
mui.init();
mui("body").on("tap","#poppicContainer",function(){
$("#PopoverPicContainer").css("top","calc(50% - 125px) !important");
});
</script>
</html>这篇关于css - 怎么用H5实现这样一个悬浮的图片浏览器呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
