如何使用一个Javascript函数将数组中多张图片的大小加倍

Question

我有一个包含5张图片的数组。 当我将鼠标悬停在图片上时，我希望它们的尺寸加倍，然后在鼠标移出时恢复为原始尺寸。 我知道如何通过分别编码每个图像来做到这一点，但是我想知道是否有一种方法可以影响所有图像（仅Javascript，不允许我使用JQuery进行此分配）。 这是我到目前为止的内容：

我的数组：

var myImages = new Array("usa.png", "canada.png", "jamaica.png", "mexico.png", "pig.png");

我写的函数...我不确定getElements行...：

var doubles = document.getElementsByTagName("img");

      doublesWidth = doubles.width;
      doublesHeight = doubles.height;

    doubles.onmouseover = function() {

       doubles.width = 2 * doublesWidth;
       doubles.height = 2 * doublesHeight;

    }

    doubles.onmouseout = function() {

       doubles.width = doublesWidth;
       doubles.height = doublesHeight;

    }

然后在体内，我用高度，宽度和src调用图像。 例如：

<img id="pig"  name="img2" src="pig.png" border="0" height="200" width="350">

谢谢！！！！！

Answer 1

我创建了一个小提琴那这里应该帮助你。 在示例中，它循环遍历所有图像并将事件侦听器应用于mouseover和mouseout ，从而相应地处理图像大小。

var images = document.getElementsByTagName('img');

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener("mouseover", function(e) {
        e.target.width = e.target.width * 2;
    });
    images[i].addEventListener("mouseout", function(e) {
        e.target.width = e.target.width / 2;
    });
}