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,.pinch-zoom{
	width: 100%;
	height: 100%;
}
.img-view img{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	touch-action: none;
}

4.js

//点击放大头像
	$('body').on('click','.self-img',function(){
		if($(this).find('img').length>0){
			let imgUrl=$(this).find('img').attr('src');
			new imgView({'imgUrl':imgUrl})//这里就是调用组件，需要传个参数就是图片的url
		}
	})

5.img-view.js

function imgView(data) {
	if(!data) {
		data = {};
	};
	this.imgUrl = data.imgUrl || null;
	this.init();
};

//初始化

imgView.prototype.init = function() {
	this.dialogShadow = $("<div class='mask-tip-shadow common-shadow img-view '><div class='pinch-zoom'><img class='pinch-zoom-img' draggable='true' src='" + this.imgUrl + "'/></div></div>");
	$("body").append(this.dialogShadow);
	this.eventMethod();

}
imgView.prototype.eventMethod = function() {
	var that = this;
	//缩放pinchzoom.js的重要代码
	***$('div.pinch-zoom').each(function() {
		new RTP.PinchZoom($(this), {});
	});***
	//	点击蒙版关闭
	this.dialogShadow.click(function(event) {
		var e = event || window.event;
		that.closeMethod();
	});
}
//关闭dom操作
imgView.prototype.closeMethod = function() {
	this.dialogShadow.remove();
};

搞定，真是的超级简单超级好用的一个功能，如果大家看不懂或者有需要将抽离出来的js合并的需求，欢迎私信我！