如何加倍图片的大小

时间：2018-04-19 01:21:46

标签： 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';
  }
}
.botton {
  height: 30px;
  width: 315px;
}

.table {
  margin-left: 0;
  text-align: center;
}
<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>

4 个答案:

答案 0 :(得分：0)

<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/ 看到这个链接我希望它对你有用

答案 1 :(得分：0)

您只需访问其width和height即可。这会使他们加倍。对它的12个部分做同样的事情。 （此外，该部分可能会使用一些工作。）

images[hideCount-1].width *= 2;
images[hideCount-1].height *= 2;

答案 2 :(得分：0)

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

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

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';
 }
}
.botton {
  height: 30px;
  width: 315px;
}

.table {
  margin-left: 0;
  text-align: center;
  }
<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>

答案 3 :(得分：0)

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';
    zoomOut(images[hideCount]);
    hideCount++;
  } else {
    images[displayCount].style.display = 'block';
    zoomOut(images[displayCount]);
    displayCount++;
    if (displayCount ===  images.length) {
      displayCount = 0;
      hideCount = 0;
    }
  }
}

document.getElementById('zoombtn').onclick = function () {
 if (hideCount > 0) {
      images[hideCount-1].style.display= 'block';
      zoomIn(images[hideCount-1]);
      hideCount--;
    } else {
      images[11].style.display='block';
      zoomIn(images[11]);
  }
}

function zoomIn(zElement) {
  var element = document.getElementById(zElement.id);
  element.style.transform = "scale(2)";
  //element.style.width *= 2;
}

function zoomOut(zElement) {
  var element = document.getElementById(zElement.id);
  element.style.transform = "scale(1)";
}
相关问题
最新问题