viewer.js实现移动端h5点击图片预览缩放

viewer.js实现h5点击图片预览缩放

1.引入文件js和css

<link href="~/Assets/css/viewer.css" rel="stylesheet" />
<script src="~/Assets/lib/viewerjs/viewer.js"></script>

引用的文件是分js版本和jquery版本的，下面使用的是js版本的；
需求：点击某张图片可以弹出大图进行预览和缩放
2.创建页面容器

        <img id="hide_image" src="" alt="你的图片地址" style="display:none;"/>

3.viewer.js的使用

var image = new Viewer(document.getElementById('hide_image'), {
                        url: 'data-original',
                    });
                    这里图片的点击事件触发：
                    $("#content img").click(function (e) {
                        var img = e.target.currentSrc;   获取到的点击图片地址
                        document.getElementById(&#