废话不多说,直接上干货!
1.mui页面引入css/js
<link href="../css/mui.css" rel="stylesheet" type="text/css" /><link href="../css/mui.previewimage.css" rel="stylesheet" type="text/css" /><script src="../js/mui.js"></script><script src="../js/mui.zoom.js"></script><script src="../js/mui.previewimage.js"></script>
2.给img图片加入
data-preview-src="" data-preview-group="1"
3.完整代码块,示例如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="../css/mui.css" rel="stylesheet" type="text/css" /><link href="../css/mui.previewimage.css" rel="stylesheet" type="text/css" /></head><body><img class="leftImage" src="../images/house.jpg" data-preview-src="" data-preview-group="1" /></body><script src="../js/mui.js"></script><script src="../js/mui.zoom.js"></script><script src="../js/mui.previewimage.js"></script><script>mui.init();mui.previewImage();mui.plusReady(function () {})</script></html>
这样就完成了图片预览功能了!!!
css/js留言获取哦。
如果觉得《mui.previewimage 图片预览 点击图片放大缩小》对你有帮助,请点赞、收藏,并留下你的观点哦!