实现ipad上的内嵌webview手势缩放图片(修改版，解决在第一张图片放大的情况下翻到下一张图片无法放大的问题) 基于Quo（js库）

      这是自己在一个项目中用到的，可以根据手势（两个手指的拖放放大1.2,1.4,1.6倍图片，然后捏放下回复到原来大小，只要修改参数就可以无限放大和缩小图片的倍数）

下面是quo支持的手势：

以下为实现ipad  iso 上面的web页面（jsp）放大三倍，缩小三倍的代码：

放大1.2倍的图片：

放大1.4倍的图片：

放大1.6倍的图片：

以下为完整代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp" %>
<!-- <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=8, minimum-scale=0.5, user-scalable=no” /> -->
<script language='javascript' src="${ctx}/static/jslib/quo.js"></script>
<script type="text/javascript">
$(document).ready( function() {

 var zoomSize = 1;
 var zoomCount = 0;
 var orgWidth = null;
 var orgHeight = null;
 $$("#image").pinchIn(function () {
 if(zoomCount < 1) return;
 zoomCount--;
 
 if(zoomCount == 0) {
 zoomSize = 1;
 } else if(zoomCount == 1) {
 zoomSize = 1 + 0.2;
 } else if(zoomCount == 2) {
 zoomSize = 1 + 0.4;
 }
 zoomResize();
 });
 $$("#image").pinchOut(function () {
 if(zoomCount > 2) return;
 zoomCount++;


 if(zoomCount == 1) {
 zoomSize = 1 + 0.2;
 } else if(zoomCount == 2) {
 zoomSize = 1 + 0.4;
 } else if(zoomCount == 3) {
 zoomSize = 1 + 0.6;
 }
 zoomResize();
 });
 
 $("#previmg").click(function () {
 zoomSize = 1;
 zoomCount = 0;
 });
 $("#nextimg").click(function () {
 zoomSize = 1;
 zoomCount = 0;
 }); 
 
 function zoomResize() {
 var img = $("#image>img");
 orgWidth = orgWidth ? orgWidth : img.width();
 orgHeight = orgHeight ? orgHeight : img.height();
 
 var newW = zoomSize * orgWidth;
 var newH = zoomSize * orgHeight;
 
 img.width(newW);
 img.height(newH);
 }
});
</script>


<c:if test="${not empty thumbs and fn:length(thumbs) > 0}">
<link rel="stylesheet" type="text/css" href="${ctx}/css/slider.css?rn=100" />
<div id="div_img" style="display:none;">
<c:forEach var="img" items="${images}">
<img   src="${ipad}/intern/cp/${intern.cvId}/${random}/${img}"/>
</c:forEach>
</div>




<div id="gallery">
  <div id="imagearea">
    <div id="image"  >
      <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
      <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
   
    </div>
  </div>
  <div id="thumbwrapper" style="display:none;">
    <div id="thumbarea">
      <ul id="thumbs">
      <c:forEach var="thumb" items="${thumbs}" varStatus="status">
        <li value="${status.index + 1}">
        <img src="${ipad}/intern/cp/${intern.cvId}/${thumb}" width="179" height="100" alt="" /></li>
        </c:forEach>
      </ul>
    </div>
  </div>
  <div id="pageInfo">
  共${fn:length(thumbs)}页,当前第<span id="_currentPageInfo">1</span>页
 
  </div>
</div>


<script type="text/javascript">
var imgid = 'image';
var imgdir = '${ipad}/intern/cp/${intern.cvId}/'+Math.random();
var imgext = '.png';
var thumbid = 'thumbs';
var auto = false;
var autodelay = 1;
var pageInfo = "_currentPageInfo";
</script>
<script type="text/javascript" src="${ctx}/js/slider.js"></script>
</c:if>
<c:if test="${empty thumbs or fn:length(thumbs) eq 0}">
<table  width="100%" class="bordered-table zebra-striped info_tb">
<tr>
<td colspan="8"  class="td_title" style="text-align:left;"><strong>对不起！该社招人员没有测评上传！</strong></td>
</tr>
</table>
</c:if>