0

我有一个必须以下列方式运行的图像：当用户第一次单击它时，图像应该放大，再次单击图像时，它应该缩小。

请帮助弄清楚如何通过使用jquery单击图像来执行这两个操作？下面是我为放大图像而编写的代码。

$('.tab1').click(function()
       {
           $(".GraphHolder").hide("slow");
           $("#top-button-container").hide("slow");
           $(".print").append('<button type="button">PRINT</button>');
          $(this).animate({width: "70%"}, 'slow');
       });
4

5 回答 5

3

HTML：

<img id="pic" src="https://www.google.com//images/icons/product/chrome-48.png">

查询：

$(function(){
    $('#pic').toggle(
          function() { $(this).animate({width: "100%"}, 500)},
           function() { $(this).animate({width: "50px"}, 500); }
    );
});

示例：http: //jsfiddle.net/K9ASw/32/

于 2012-07-23T22:59:23.483 回答
2

您是否尝试过使用toggleClass？您可以使用可选的 [duration] 参数来指定您希望转换持续多长时间。

于 2012-07-23T22:22:36.910 回答
1

如果真的旧的或蹩脚的浏览器不是问题，我会选择 CSS 过渡，更简单、更流畅。

小提琴

于 2012-07-23T22:36:24.443 回答
1 
   **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">
于 2012-07-24T12:15:40.350 回答
0 
$(function () {
 $('.tab1').on('click', function()
   {
     if($(this).hasClass('zoomed')) {
       $(this).removeClass('zoomed')
       $(this).children('img').animate({width: "10%"}, 'slow');
     }
       $(this).addClass('zoomed')
       $(this).children('img').animate({width: "70%"}, 'slow');
     }
 });
});

我删除了所有与图像调整大小无关的代码。此外，如果您正在处理图像，则必须定位图像标签，而不是外部 div。如果图像作为背景图像应用到 .tab1 类，那么您就可以了。

于 2012-07-23T22:28:57.250 回答