mui- 給圖片新增點選檢視大圖功能
阿新 • • 發佈：2018-12-22
<html> <head> <meta charset="utf-8"> <title>圖片放大</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"> <!--App自定義的css--> <style type="text/css"> .mui-preview-image.mui-fullscreen { position: fixed; z-index: 20; background-color: #000; } .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-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-slider .mui-slider-group .mui-slider-item img { width: auto; height: auto; max-width: 100%; max-height: 100%; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body> <img src="images/100.jpg" data-preview-src="" /> </body> <script src="js/mui.min.js"></script> <script src="js/mui.zoom.js"></script> <script src="js/mui.previewimage.js"></script> <script> mui.previewImage(); </script> </html>