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>