第一步:mui如果想使用系统自带的图片展示功能,,那么必须要引入如下2个js文件
<script src="../../js/mui.zoom.js"></script> <script src="../../js/mui.previewimage.js"></script>
这两个文件就是处理图片放大缩小,弹出层,图片预处理和加载的直接js文件
第二步:图片展示的样式表,也就是对图片弹出层的样式
建议自己弄一个css文件保存,因为内容比较多
<style type="text/css"> .mui-preview-image.mui-fullscreen { position: fixed; z-index: 20; background-color: #000; } .mui-preview-header, .mui-preview-footer { position: absolute; width: 100%; left: 0; z-index: 10; } .mui-preview-header { height: 44px; top: 0; } .mui-preview-footer { height: 50px; bottom: 0px; } .mui-preview-header .mui-preview-indicator { display: block; line-height: 25px; color: #fff; text-align: center; margin: 15px auto 4; width: 70px; background-color: rgba(0, 0, 0, 0.4); border-radius: 12px; font-size: 16px; } .mui-preview-image { display: none; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .mui-preview-image.mui-preview-in { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .mui-preview-image.mui-preview-out { background: none; -webkit-animation-name: fadeOut; animation-name: fadeOut; } .mui-preview-image.mui-preview-out .mui-preview-header, .mui-preview-image.mui-preview-out .mui-preview-footer { display: none; } .mui-zoom-scroller { position: absolute; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; margin: 0; -webkit-backface-visibility: hidden; } .mui-zoom { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .mui-slider .mui-slider-group .mui-slider-item img { width: auto; height: auto; max-width: 100%; max-height: 100%; } .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img { width: 100%; } .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item { display: inline-table; } .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img { display: table-cell; vertical-align: middle; } .mui-preview-loading { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; } .mui-preview-loading.mui-active { display: block; } .mui-preview-loading .mui-spinner-white { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; height: 50px; width: 50px; } .mui-preview-image img.mui-transitioning { -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; transition: transform 0.5s ease, opacity 0.5s ease; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } p img { max-width: 100%; height: auto; } </style>
第三步: 给图片加上属性 data-preview-src=” data-preview-group=’1’,告诉js我要进行最大化展示,那么框架就会把所有的 带有这两个属性的图片进行展示,会根据图片数量进行上一个下一个滑动展示,效果很棒,如果图片没有设置这2个属性,那么这个图片点击是没有反应的,其他图片展示的时候上下滑动也不会展示该图片
下面是我动态展示图片的额代码
mui.each(json,function(i, item) { var url=item.imageUrl; var img="<img src='http://"+server_ip+":8090"+url+"' data-preview-src='' data-preview-group='1' style='width: 100px;height: 100px;margin-right: 3px;' />"; imgs+=img; }); imgShow.innerHTML=imgs; },
最后一步:也是最关键的一步,调用 mui.previewImage();进行预加载,在页面的最先面,只有预加载了,才能进行展示处理。
<script> mui.previewImage(); </script>