如何使用 jquery 放大和缩小图像？答案

【问题标题】：How to zoom in and zoom out image using jquery?如何使用 jquery 放大和缩小图像？
【发布时间】：2011-01-13 12:44:59
【问题描述】：

我有以下代码

<div class="c1">
    <div class="d1">
         <img />
         <img />
         <img />
    </div>
</div>

1.标签中包含GIF图像。这些图像是透明的，其中一部分用透明的黄色补丁突出显示。 2.css类应用于内部div类，有一个jpeg类型的背景图像在css类的帮助下分配给内部div类。 3. 外部的 div 在应用 css 类的帮助下可以滚动。

我想在jquery的帮助下放大和缩小div内的图像。

那么是否可以在 jquery 的帮助下放大和缩小图像？它的简单代码是什么？

等待您的回复朋友！

谢谢！

【问题讨论】：

标签： jquery image zooming

【解决方案1】：

背景不能缩放，只有<img>标签可以。

您可以将图像放在 div 中，其中 div 具有overflow:hidden;，然后缩放图像。

你可以在这里看到一个简单的例子： http://jsbin.com/ozugi3/2

http://jsbin.com/ozugi3/2/edit

【讨论】：

【解决方案2】：

    ****here is the script****
       <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
      <script type="text/javascript">
        $(document).ready(function () {
            $('#Img1, #Img2, #Img3').mouseover(function () {
                $(this).animate({ width: "122px", height: "110px" }, 100);
            });
            $('#Img1, #Img2, #Img3').mouseout(function () {
                $(this).animate({ width: "118px", height: "106px" }, 100);
            });
        });
      </script>
**Aspx code**
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">

【讨论】：