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>
這樣就可以直接縮放圖片了