pinchzoom插件模拟微信客户端点击图片放大(支持触摸滑动放到缩小) 代码如下
<!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>
这样就可以直接缩放图片了
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/18864.html