pinchzoom插件模拟微信客户端点击图片放大(支持触摸滑动放到缩小)

pinchzoom插件模拟微信客户端点击图片放大(支持触摸滑动放到缩小) 代码如下

<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
<title>模拟微信客户端点击图片 (支持触摸滑动放大缩小)</title>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<style>
.pinch-zoom,.pinch-zoom img{
width: 100%;
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
}
.pinch-zoom-container{
height:1400px;
display: none;
}
</style>
</head>

<body>

<div class="kandatucontainer pinch-zoom">
<img class="fangdac" src="{$yuming}/images/fangdac.png" />
</div>

<script src="/js/pinchzoom.js"></script>
<script type="text/javascript">
$(function () {
$('.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});

 

//pinch-zoom-containe是最外面的容器 是自动生成的
$('.fangdacbtn, .p18_wz1').on('click',function () {
$('.fangdac').parents('.pinch-zoom-container').fadeIn();
$("body").scrollTop(0)
})

$('.fangdac').parents('.pinch-zoom-container').on('click',function () {
$(this).fadeOut();
})
})
</script>

</body>
</html>
</pre>

这样就可以直接缩放图片了

 

posted @ 2019-11-12 14:26  newmiracle宇宙  阅读(1866)  评论(0)  编辑  收藏  举报