移动端图片缩放（不包括滑动查看）

应用场景：移动端页面，点击图片以后，放大而且能够进行缩放，单击图片以后关闭。

弊端：若是实现单击关闭图片，那么没法实现双击放大；若是实现双击放大图片，则没法实现单击关闭。

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