javascript - 移动端 html5 中的 Zoomer

Question

我正在处理应该放大和缩小触摸的图像，如 this .我使用了很多来自网络的例子，比如 this example我还使用了元标记视口(viewport)。但我没有实现我需要的功能。我搜索了很多但没有找到任何理想的解决方案。有关此问题的任何帮助。

当时我正在使用 meta 标签，但是当我双击图像时，图像变小了，没有回到原来的位置。

    <meta name="viewport" 
            content="width=device-width, initial-scale=1.0,  maximum-scale=5.0, minimum-scale=0.25;, user-scalable=yes">

从网上我使用了一个 zoom 的 css 和 js 文件，但它们的行为也一样

Answer 1

当时我找到了解决这个问题的方法，就是使用动画功能并增加高度、宽度或单独的高度或宽度来完成缩放。

这是我的代码，可以在鼠标悬停时放大和缩小图像:

     <h1>Image to Zoom In and Zoom Out</h1>

     <br />

      <img src="http://1.bp.blogspot.com/-XSHj67HnEzU/TviX8Jqe-hI/AAAAAAAABRQ        /Io5Ob6bYWq0/s1600
      /ShadowEffect.jpg" alt="image zoom in and out" title="image zoom with  jquery" id="image1">
     </img>

在 js 中:

$(文档).ready(函数(){

   $('#image1').width(200);

   $('#image1').mouseover(function()

   {

      $(this).css("cursor","pointer");

      $(this).animate({width: "300px"}, 'slow');

   });


$('#image1').mouseout(function()

  {   

      $(this).animate({width: "200px"}, 'slow');


   });

});