0

次のように動作する必要がある画像があります。ユーザーが最初にクリックすると画像がズームインし、画像を再度クリックするとズームアウトします。

jqueryを使用して画像をクリックして、2つのアクションがどのように実行されるかを理解するのを手伝ってください。以下は、画像をズームするために作成したコードです。

$('.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">

Jクエリ:

$(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 クラスに適用されている場合は、sol です。

于 2012-07-23T22:28:57.250 に答える