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

Stack Overflow用户

提问于 2018-04-18 09:43:33

回答 1查看 38关注 0票数 0

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

显示按钮工作得非常完美。但我不知道如何编码缩放按钮，但这是我希望它做的事情:当你点击缩放按钮时，隐藏的最后一张图片必须再次可见，大小应该是正常大小的两倍。让我举两个例子来说明一下：

如果在按下显示按钮3次后单击缩放按钮，则第三张图片必须变为可见，并且其大小必须增大为正常大小的两倍。

当您在按下显示按钮14次后再按缩放按钮时，第十二张图片必须出现并增长，因为它是最后一张消失的图片。

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

javascript

回答 1

Stack Overflow用户

发布于 2018-04-18 11:55:01

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

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

话虽如此，@DCR是对的。在目标元素上添加和删除像.classlist.add('yourclass')和.classlist.remove('yourclass')这样的css类通常更容易、更干净。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49889874

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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