Question

有点问题。我已经搜索了Google几个小时而没有找到任何解决方案。有没有人知道如何创建一个简单的图库。我没什么特别的。这是代码：

<a href="images/bild3254.jpg"><img src="images/bild3254.jpg" width="30%" height="30%"></a>
<a href="images/bild3255.jpg"><img src="images/bild3255.jpg" width="30%" height="30%"></a>
<a href="images/bild3256.jpg"><img src="images/bild3256.jpg" width="30%" height="30%"></a>

如您所见：非常基本的图库仅供个人离线使用。图像同时加载所有图像。所有图像都由浏览器本身缩小。

到目前为止一切都很好。现在我的问题：我想要一个按钮来改变单个链接或按钮点击该页面上的所有图像的大小（大约100）。怎么样？

这意味着：例如SMALL LARGE（按钮）。单击“大”时，它将更改为其原始大小的70％，在“小”上更改为30％。简单的尺寸切换。

不想要：

一次只改变一个图像尺寸
图像需要保持较大的尺寸，直到下次重新加载
指向原始尺寸的超链接仍可使用

有人可以帮我吗？

Answer 1

您可以使用此脚本动态更改大小，但我应该警告您，当使用百分比作为实际引用容器的大小时，而不是图像的实际大小。所以70％将是窗口的70％。

var images = document.getElementsByTagName('img');
var resizeImages = function(size) {
  for (var i = 0; i < images.length; i++) {
    images[i].style.width = size;
    images[i].style.height = size;
  }
}
document.addEventListener('click', function(e) {
  if (e.target.id == 'small') {
    resizeImages('30%');
  }
  if (e.target.id == 'big') {
    resizeImages('70%');
  }
  if (e.target.id == 'toggle') {
    if (images[0].style.width == '30%') {
      resizeImages('70%');
    } else {
      resizeImages('30%');
    }
  }
}, false);

var images = document.getElementsByTagName('img');
var resizeImages = function(size) {
  for (var i = 0; i < images.length; i++) {
    images[i].style.width = size;
    images[i].style.height = size;
  }
}
document.addEventListener('click', function(e) {
  if (e.target.id == 'small') {
    resizeImages('30%');
  }
  if (e.target.id == 'big') {
    resizeImages('70%');
  }
  if (e.target.id == 'toggle') {
    if (images[0].style.width == '30%') {
      resizeImages('70%');
    } else {
      resizeImages('30%');
    }
  }
}, false);

<a href="images/bild3254.jpg">
  <img src="http://www.lorempixel.com/400/400/abstract" width="30%" height="30%">
</a>
<a href="images/bild3255.jpg">
  <img src="http://www.lorempixel.com/400/400/business" width="30%" height="30%">
</a>
<a href="images/bild3256.jpg">
  <img src="http://www.lorempixel.com/400/400/animals" width="30%" height="30%">
</a>
<a href="javascript:void(0)" id="small">Small</a>
<a href="javascript:void(0)" id="big">Big</a>
<a href="javascript:void(0)" id="toggle">Toggle</a>

简单图片库：点击

1 个答案: