应用场景：移动端页面，点击图片之后，放大并且可以进行缩放，单击图片之后关闭。
弊端：如果实现单击关闭图片，那么无法实现双击放大；如果实现双击放大图片，则无法实现单击关闭。
style样式：
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
html,body{
width: 100%;
height: 100%;
position: relative;
}
.imgDiv{
width: 90%;
height: 90%;
padding: 5% 5%;
}
.imgDiv img{
width: 30%;
}
.largeImg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.largeImg img{
width: 100%;
height: 100%;
}
.pinch-zoom-container{
position: absolute !important;
width: 100%;
height: 100%;
top: 0;
}
HTML：
<div class="imgDiv">
<img src="img/advance.png"/>
</div>
script：
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pinchzoom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
enlargeImg();//点击图片之后放大
})
//点击图片之后放大
function enlargeImg(){
$(".imgDiv img").unbind("click").click(function(){
var imgSrc = $(this).attr("src");
var html = '<div class="largeImg" onclick="hideLargeImg();"><img src="'+imgSrc+'" /></div>';
$("body").append(html);
$('.largeImg').each(function () {
new RTP.PinchZoom($(this), {});
});
enlargeImg();//点击图片之后放大
})
}
//单击放大的图片关闭
function hideLargeImg(){
$(".pinch-zoom-container").unbind("click").click(function(){
$(".largeImg").remove();
$(".pinch-zoom-container").hide();
})
}
</script>
页面代码参考下载地址：
链接：https://pan.baidu.com/s/1wVSu1CTUlX5yz8V9JaF2-g
提取码：m827
