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

Question

我有一个包含 5 张图像的数组。当我将鼠标悬停在图像上时，我希望它们的大小加倍，然后 return 到原始大小 onmouseout。我知道如何通过单独编码每个图像来做到这一点，但我想知道是否有办法编写一个 Javascript 函数（请只 Javascript，我不允许使用 JQuery对于这个任务）会影响所有的图像？这是我目前所拥有的：

我的阵列：

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

我写的函数...我不确定 getElements 行...:[=14=]

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

我创建了一个 fiddle，here 应该可以帮助你。在示例中，它遍历所有图像并将事件侦听器应用于 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;
    });
}

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

How to double the size of multiple pictures in an array with one Javascript function

javascript

arrays

function

onmouseover

onmouseout