MUI实现图片预览
MUI实现图片预览
-
引入必要的css和js文件
mui.js要在其他js上面<link href="../../css/mui.css" rel="stylesheet" /> <link rel="stylesheet" href="../../css/mui.imageviewer.css" /> <script src="../../js/mui.js"></script> <script src="../../js/mui.zoom.js"></script> <script src="../../js/mui.previewimage.js"></script>
-
调用mui.previewImage()方法
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=789785938,2401251663&fm=26&gp=0.jpg" data-preview-src="" data-preview-group="1" /> mui.previewImage();
图片上要设置data-preview-src 和 data-preview-group 两个属性,data-preview-group的值相同的为同一组。
如果图片是js动态生成的,mui.previewImage()方法要在图片渲染完再执行。
-
引入css样式
网上的其他教程都只要上面的步骤就可以了,但我使用的时候还是不能预览,看官方的demo,发现官方的页面上面还有一串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; }
世间种种的诱惑,不惊不扰我清梦