文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将图片大小加倍

问如何将图片大小加倍
EN

Stack Overflow用户
提问于 2018-04-19 09:21:46
回答 4查看 96关注 0票数 0

这是我写的代码，它工作得很好。但这里面有一个小问题。当我点击缩放按钮时，不仅最后一个隐藏的图片必须出现，而且它的大小必须增加(正常大小的两倍)。在我的代码中，只显示图片，但它的大小不变。请帮帮我，我不知道该怎么做。

​

代码语言：javascript
复制
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;
    }
  }
}

document.getElementById('zoombtn').onclick = function() {
  if (hideCount > 0) {
    images[hideCount - 1].style.display = 'block';
    hideCount--;
  } else {
    images[12].style.display = 'block';
  }
}
代码语言：javascript
复制
.botton {
  height: 30px;
  width: 315px;
}

.table {
  margin-left: 0;
  text-align: center;
}
代码语言：javascript
复制
<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>

​

javascript
EN

回答 4

Stack Overflow用户

发布于 2018-04-19 09:38:06

代码语言：javascript
复制
<img onload="double(this.id);" name="bigPic" id="bigPic" src="http://static.adzerk.net/Advertisers/bd294ce7ff4c43b6aad4aa4169fb819b.jpg" height="1000" width="1000"/>

http://jsfiddle.net/LFPWt/看到这个链接，我希望它能对你有用

票数 0
EN

Stack Overflow用户

发布于 2018-04-19 09:39:26

你只需要访问它的width和height即可。这将使它们加倍。对其中的12部分执行相同的操作。(另外，这部分可能需要做一些工作。)

代码语言：javascript
复制
images[hideCount-1].width *= 2;
images[hideCount-1].height *= 2;
票数 0
EN

Stack Overflow用户

发布于 2018-04-19 10:05:01

如果我理解正确的话，您希望在单击缩放时将显示的图像大小加倍，并在进一步显示/缩放图像时保持其原始大小。要使图像大小加倍，只需*= 2图像的height和width即可。为了将其恢复为原始大小，我来看一下setImageSize函数。这不是一个最优的解决方案，但它应该会让你对如何做到这一点有一个大致的了解。

看看下面的代码，希望它能实现你想要的：

​

代码语言：javascript
复制
var images = document.querySelectorAll('img.images');
var displayCount = 0;
var hideCount = 0;

function setImageSize(){
  var originalWidth = 200;
  var originalHeight = 200;
  for(var i=0; i<images.length; i++){
    images[i].width = originalWidth;
    images[i].height = originalHeight;
  }
}

document.getElementById('display').onclick = function() {
  if (hideCount < images.length) {
    setImageSize();
    images[hideCount].style.display = 'none';
    hideCount++;
  } else {
    images[displayCount].style.display = 'block';
    displayCount++;
    if (displayCount ===  images.length) {
      displayCount = 0;
      hideCount = 0;
    }
  }
}
</script>
<script>
document.getElementById('zoombtn').onclick = function () {
if (hideCount > 0) {
   setImageSize();
   images[hideCount-1].style.display= 'block';
   images[hideCount-1].height *=2;
   images[hideCount-1].width *=2;
   hideCount--;
   } else {
   images[12].style.display='block';
 }
}
代码语言：javascript
复制
.botton {
  height: 30px;
  width: 315px;
}

.table {
  margin-left: 0;
  text-align: center;
  }
代码语言：javascript
复制
<html>
<body>
<button class="botton";  id="display";>Display</button>
<button class="botton";  id="zoombtn";>Zoom</button>
<br>

<table class="table">
  <tr>
    <td>
      <img SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Butterflies" id="image-1" class="images" />
    </td>
    <td>
      <img SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Eye" id="image-2" class="images" />
    </td>
    <td>
      <img SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Wave" id="image-3" class="images" />
    </td>
    <td>
      <IMG SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Jungle" id="image-4" class="images" />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Bridge" id="image-5" class="images" />
    </td>
    <td>
      <IMG SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Duck" id="image-6" class="images" />
    </td>
    <td>
      <IMG SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Eggs" id="image-7" class="images" />
    </td>
    <td>
      <IMG SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Aurora" id="image-8" class="images" />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Technology" id="image-9" class="images" />
    </td>
    <td>
      <IMG SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="Hills" id="image-10" class="images" />
    </td>
    <td>
      <IMG SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="strings" id="image-11" class="images" />
    </td>
    <td>
      <IMG SRC="https://erconsult.com.au/wp-content/uploads/2015/04/placeholder-200x200.png" ALT="vegetables" id="image-12" class="images" />
    </td>
  </tr>
</table>
</br>
</body>

​

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

https://stackoverflow.com/questions/49911272

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档