Question

我有以下代码

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

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

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

所以可以借助jquery放大和缩小图像吗？什么是简单的代码？

等待你的回复朋友！

谢谢！

Answer 1

无法缩放背景，只有<img>个标签可以。

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

您可以在此处看到一个快速示例： http://jsbin.com/ozugi3/2

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

Answer 2

Kabbar Image Zoomer可以解决您的问题： http://www.ideabonus.com/Kabbar/index.html

Answer 3

    ****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">

Answer 4

试试这个link。图像放大效果非常适合这段代码。

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

4 个答案: