js利用pinchzoom.js实现移动端模仿微信头像点击放大、缩放-优快云博客

本文介绍如何使用pinchzoom.js实现在移动端轻松实现图片点击放大、缩放功能，附带详细代码示例，适用于微信头像等场景。

js利用pinchzoom.js实现移动端模仿微信头像点击放大、缩放

众里寻他千百度，蓦然回首，那人却在灯火阑珊处。。。写这个功能的时候有点儿这个意思，如果你的需求是和微信头像的点击缩放还原功能相似，请拿走代码直接用😁！刚开始觉的应该是那种网上一搜一大把的，结果。。。只能自己写了，但是想了想缩放不好写，还是得借助支持缩放的插件，试了很多，最后发现pinchzoom.js很好用，轻量使用方便，三行代码解决，这里先顺便说一下touch.js，touch.js确实功能比较多，拖拽、缩放等，所以不都轻量，使用也比较复杂，不适合这种小功能。下面通过代码介绍pinchzoom.js的使用
1.首先需要引入jq、pinchzoom.js
2.我这里还需要引入一个img-view.js
我把这个功能单独抽离出来，写成一个组件，需要穿个参数就是图片的url，在其他地方使用的时候就费心简单，直接调用就可以，个人比较喜欢这种方式，看大家需求，不需要的话也可以直接复制img-view.js的功能代码放在js业务代码里，很简单
2.html

<div class="position-center-vertical"><img class="self-img" src="http://bucket2.bba.vip/200610160348rUmpGopC0p.jpeg"/></div>

3.css

.mask-tip-shadow {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    background: rgb(0, 0, 0);
}
.pinch-zoom-container,.