MUI点击图片放大，再次点击关闭

秒速五厘米 2022-02-04 01:39 543阅读 0赞

css部分可自己创建.css文件，然后引入到html页面中使用。

.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;
    	}
    }

<ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <img class="bigimage" src="img1.png" data-preview-src="" data-preview-group="4">
            <img class="bigimage" src="img2.png" data-preview-src="" data-preview-group="4">  
            <img class="bigimage" src="img3.png" data-preview-src="" data-preview-group="4">  
        <li>
    </ul>
    
    //data-preview-src(【必有】没有这个属性，Js无法抓取图片)
    //data-preview-group(【自选】设定为一个组的图片,一个组有多少图片，上方数字显示就有多少)

//引入
    <script src="js/mui.min.js"></script>
    <script src="js/mui.zoom.js"></script>
    <script src="js/mui.previewimage.js"></script>
    <script>
        //点击图片放大（事件）
    	mui('.mui-table-view').on('tap', '.bigimage', function() {
    		mui.previewImage();//调用函数
    	})
    </script>