移動端圖片縮放（不包括滑動查看）

應用場景：移動端頁面，點擊圖片以後，放大而且能夠進行縮放，單擊圖片以後關閉。

弊端：若是實現單擊關閉圖片，那麼沒法實現雙擊放大；若是實現雙擊放大圖片，則沒法實現單擊關閉。

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