失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > mui.previewimage 图片预览 点击图片放大缩小

mui.previewimage 图片预览 点击图片放大缩小

时间:2021-07-10 01:24:11

相关推荐

mui.previewimage 图片预览 点击图片放大缩小

废话不多说,直接上干货!

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 图片预览 点击图片放大缩小》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。