Question

你好，我需要实现这一点---＆gt;使图像更大。选择不同的图像后，之前的图像将达到点击之前的大小，并且所选图像变大

仅在再次点击图像后才能完成此工作

$(document).ready(function () {
    var small={width: "127px",height: "128px"};
    var large={width: "200px",height: "201px"};
    var count=1; 
    $("#weekly").css(small).on('click',function () { 
        $(this).animate((count==1)?large:small);
        count = 1-count;
    });
});

需要实现它在选择了另一个之后使图像更小

Answer 1

如下所示： -

$(document).ready(function () {
    var small={width: "127px",height: "128px",background:"green"};//background added to show you that it's working
    var large={width: "200px",height: "201px",background:"green"};
    $(".weekly").css(small).on('click',function () {
        $(this).animate(large);
        $('.weekly').not($(this)).animate(small);
    });
});

.weekly{
cursor:pointer; /* for cursor */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>if images are inside div</h1><br>

<div class="weekly"><img src="https://www.fusemail.com/wp-content/uploads/2014/02/industry-compliance.png?x12193"></div><br>
<div class="weekly"><img src="https://www.fusemail.com/wp-content/uploads/2014/02/industry-compliance.png?x12193"></div><br>
<div class="weekly"><img src="https://www.fusemail.com/wp-content/uploads/2014/02/industry-compliance.png?x12193"></div><br>


<h1>Or images are directly there</h1><br>

<img class="weekly" src="https://www.fusemail.com/wp-content/uploads/2014/02/industry-compliance.png?x12193">
<img class="weekly" src="https://www.fusemail.com/wp-content/uploads/2014/02/industry-compliance.png?x12193">
<img class="weekly" src="https://www.fusemail.com/wp-content/uploads/2014/02/industry-compliance.png?x12193">

Answer 2

您可以使用JQuery addClass和removeClass

＆＃13;

$('.make_bigger').click(function() {
  $('.active').not(this).addClass('non_active');
  $('.active').not(this).removeClass('active');
  if ($(this).hasClass('active')) {
    $(this).addClass('non_active');
    $(this).removeClass('active');
  } else {
    $(this).removeClass('non_active');
    $(this).addClass('active');
  }
});

＆＃13;

.active {
  animation: make_bigger 1s ease;
  width: 200px;
  height: 201px;
}
@keyframes make_bigger {
  from { width: 127px; height: 128px; }
  to { width: 200px; height: 201px; }
}
.non_active {
  animation: make_smaller 1s ease;
  width: 127px;
  height: 128px;
}
@keyframes make_smaller {
  from { width: 200px; height: 201px; }
  to { width: 127px; height: 128px; }
}
.container {
  width: 200px;
  height: 201px;
}

＆＃13;

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div class="container">
  <img width="127px" height="128px" class="make_bigger" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>
<div class="container">
  <img width="127px" height="128px" class="make_bigger" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>
<div class="container">
  <img width="127px" height="128px" class="make_bigger" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>

＆＃13;

Answer 3

非常简单

＆＃13;

img
{
height:50%;
width:50%;
transition:0.5s;
}
img:hover
{
height:100%;
width:100%;
transition:0.5s;

}

＆＃13;

<html>

  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGGB4NFcYsTk8ZYe35_aT0OmJ2e-NVS0rKxaFX5lhDCUkCW9IRVw">  </img>

</html>

＆＃13;

点击图片放大

3 个答案: