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

发布于 2024-08-20 13:25:29 字数 437 浏览 4 评论 0原文

我有以下代码

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

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

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

那么是否可以借助jquery来放大和缩小图像呢？它的简单代码是什么？

等待朋友们的回复！

谢谢你！

原文

I have following code

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

1.There are GIF images included in tag. These images are transparent and some portion of them are highlighted with transparent yellow patch.
2. css class is applied to inner div class and there is a background image of type jpeg is assigned to inner div class with the help of css class.
3. The outside div is made scrollable with the help of css class applied to it.

I want to do zoom in and out on the image image inside div with the help of jquery.

so is it possible to zoom in and out the image with the help of jquery?
what is the simple code for it?

waiting for your replies friends!

Thank You!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

分开我的手 2024-08-27 13:25:29

背景无法缩放，只有标签可以。

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

您可以在此处查看一个简单示例：
http://jsbin.com/ozugi3/2

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

回复收藏 0 原文

素年丶 2024-08-27 13:25:29

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

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

回复收藏 0 原文

~没有更多了~