MUI之图片预览（zoom.js和previewimage.js）

  1 <style type="text/css">
  2     .mui-preview-image.mui-fullscreen {
  3         position: fixed;
  4         z-index: 20;
  5         background-color: #000;
  6     }
  7     .mui-preview-header,
  8     .mui-preview-footer {
  9         position: absolute;
 10         width: 100%;
 11         left: 0;
 12         z-index: 10;
 13     }
 14     .mui-preview-header {
 15         height: 44px;
 16         top: 0;
 17     }
 18     .mui-preview-footer {
 19         height: 50px;
 20         bottom: 0px;
 21     }
 22     .mui-preview-header .mui-preview-indicator {
 23         display: block;
 24         line-height: 25px;
 25         color: #fff;
 26         text-align: center;
 27         margin: 15px auto 4;
 28         width: 70px;
 29         background-color: rgba(0, 0, 0, 0.4);
 30         border-radius: 12px;
 31         font-size: 16px;
 32     }
 33     .mui-preview-image {
 34         display: none;
 35         -webkit-animation-duration: 0.5s;
 36         animation-duration: 0.5s;
 37         -webkit-animation-fill-mode: both;
 38         animation-fill-mode: both;
 39     }
 40     .mui-preview-image.mui-preview-in {
 41         -webkit-animation-name: fadeIn;
 42         animation-name: fadeIn;
 43     }
 44     .mui-preview-image.mui-preview-out {
 45         background: none;
 46         -webkit-animation-name: fadeOut;
 47         animation-name: fadeOut;
 48     }
 49     .mui-preview-image.mui-preview-out .mui-preview-header,
 50     .mui-preview-image.mui-preview-out .mui-preview-footer {
 51         display: none;
 52     }
 53     .mui-zoom-scroller {
 54         position: absolute;
 55         display: -webkit-box;
 56         display: -webkit-flex;
 57         display: flex;
 58         -webkit-box-align: center;
 59         -webkit-align-items: center;
 60         align-items: center;
 61         -webkit-box-pack: center;
 62         -webkit-justify-content: center;
 63         justify-content: center;
 64         left: 0;
 65         right: 0;
 66         bottom: 0;
 67         top: 0;
 68         width: 100%;
 69         height: 100%;
 70         margin: 0;
 71         -webkit-backface-visibility: hidden;
 72     }
 73     .mui-zoom {
 74         -webkit-transform-style: preserve-3d;
 75         transform-style: preserve-3d;
 76     }
 77     .mui-slider .mui-slider-group .mui-slider-item img {
 78         width: auto;
 79         height: auto;
 80         max-width: 100%;
 81         max-height: 100%;
 82     }
 83     .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
 84         width: 100%;
 85     }
 86     .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
 87         display: inline-table;
 88     }
 89     .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
 90         display: table-cell;
 91         vertical-align: middle;
 92     }
 93     .mui-preview-loading {
 94         position: absolute;
 95         width: 100%;
 96         height: 100%;
 97         top: 0;
 98         left: 0;
 99         display: none;
100     }
101     .mui-preview-loading.mui-active {
102         display: block;
103     }
104     .mui-preview-loading .mui-spinner-white {
105         position: absolute;
106         top: 50%;
107         left: 50%;
108         margin-left: -25px;
109         margin-top: -25px;
110         height: 50px;
111         width: 50px;
112     }
113     .mui-preview-image img.mui-transitioning {
114         -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
115         transition: transform 0.5s ease, opacity 0.5s ease;
116     }
117     @-webkit-keyframes fadeIn {
118         0% {
119             opacity: 0;
120         }
121         100% {
122             opacity: 1;
123         }
124     }
125     @keyframes fadeIn {
126         0% {
127             opacity: 0;
128         }
129         100% {
130             opacity: 1;
131         }
132     }
133     @-webkit-keyframes fadeOut {
134         0% {
135             opacity: 1;
136         }
137         100% {  
138             opacity: 0;
139         }
140     }
141     @keyframes fadeOut {
142         0% {
143             opacity: 1;
144         }
145         100% {
146             opacity: 0;
147         }
148     }
149     p img {
150         max-width: 100%;
151         height: auto;
152     }
153 </style>
　　

1 <ul>
2     <li><img class="file-pic" data-preview-src="" data-preview-group="1" src="../../ydzh.imgs/entry/ban1.png"/></li>
3     <li><img class="file-pic" data-preview-src="" data-preview-group="1" src="../../ydzh.imgs/entry/img_ban.png"/></li>
4     <li><img class="file-pic" data-preview-src="" data-preview-group="1" src="../../ydzh.imgs/entry/img_ban.png"/></li>
5 </ul>  

1 <script src="../../mui.frame/js/mui.min.js"></script>
2 <script src="../../mui.frame/js/mui.zoom.js"></script>
3 <script src="../../mui.frame/js/mui.previewimage.js"></script>
4 <script>
5     mui.previewImage();
6 </script>