Question

我在这里写的代码中有2个按钮：显示按钮和缩放按钮。

显示按钮工作得非常完美。但我不知道如何编码缩放按钮，但这是我想要它做的：当您单击缩放按钮时，隐藏的最后一张图片必须再次可见，并且尺寸应该比正常尺寸增长两倍。让我通过两个例子来澄清自己：

按下显示按钮3次后单击缩放按钮时，第三张图片必须变为可见，其大小必须增加正常尺寸的两倍。

按下显示按钮14次后按变焦按钮，第12张照片必须出现并增大，因为它是最后一张消失的照片。

<html>

<head>

<style>
.botton {
  height: 30px;
  width: 315px;
}

.table {
  margin-left: 0;
  text-align: center;
  }

</style>

</head>

<body>

<button class="botton";  id="display";>Display</button>
<button class="botton";  id="zoombtn";>Zoom</button>
<br>

<table class="table">
  <tr>
    <td>
      <img SRC="IMG/blfy.gif" ALT="Butterflies" id="image-1" class="images" />
    </td>
    <td>
      <img SRC="IMG/eye.gif" ALT="Eye" id="image-2" class="images" />
    </td>
    <td>
      <img SRC="IMG/wave.gif" ALT="Wave" id="image-3" class="images" />
    </td>
    <td>
      <IMG SRC="IMG/jungle.gif" ALT="Jungle" id="image-4" class="images" />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="IMG/bridge.gif" ALT="Bridge" id="image-5" class="images" />
    </td>
    <td>
      <IMG SRC="IMG/duck.gif" ALT="Duck" id="image-6" class="images" />
    </td>
    <td>
      <IMG SRC="IMG/egg.gif" ALT="Eggs" id="image-7" class="images" />
    </td>
    <td>
      <IMG SRC="IMG/aurora.gif" ALT="Aurora" id="image-8" class="images" />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="IMG/it.gif" ALT="Technology" id="image-9" class="images" />
    </td>
    <td>
      <IMG SRC="IMG/hill.gif" ALT="Hills" id="image-10" class="images" />
    </td>
    <td>
      <IMG SRC="IMG/string.gif" ALT="strings" id="image-11" class="images" />
    </td>
    <td>
      <IMG SRC="IMG/vegi.gif" ALT="vegetables" id="image-12" class="images" />
    </td>
  </tr>
</table>
</br>




</body>


<script>

var images = document.querySelectorAll('img.images');
var displayCount = 0;
var hideCount = 0;
document.getElementById('display').onclick = function() {
  if (hideCount < images.length) {
    images[hideCount].style.display = 'none';
    hideCount++;
  } else {
    images[displayCount].style.display = 'block';
    displayCount++;
    if (displayCount ===  images.length) {
      displayCount = 0;
      hideCount = 0;
    }
  }
}

</script>

</html>

Answer 1

仅使用javascript的简单解决方案可能如下所示：

document.getElementById('zoombtn').onclick = function () {
  if (hideCount > 0) {
    images[hideCount - 1].style.width = images[hideCount - 1].style.width * 2;
  }
}

话虽如此，@ DC是对的。通过目标元素上的.classlist.add('yourclass')和.classlist.remove('yourclass')等内容添加和删除css类通常更简单，更清晰。

如何在我的代码中放大特定图片？

1 个答案: