Question

我可以使用文档中的一个图像成功完成此操作：

var glbInc, glbDec;


function decreaseSizeImage() // will get back to its normal default size
{
if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
if (document.getElementById("idImage").height > 111)
{
document.getElementById("idImage").height -= 1;
document.getElementById("idImage").width -= 1;
glbDec = setTimeout("decreaseSizeImage()", 6);
};
}

function increaseSizeImage()
{
if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
if (document.getElementById("idImage").height < 222)
{
document.getElementById("idImage").height += 1;
document.getElementById("idImage").width += 1;
glbInc = setTimeout("increaseSizeImage()", 6);
};
}

但是当我尝试使用多个图像时，只有一个图像会扩展，无论哪个图像被翻转。我不知道如何设置以便它能顺利运行

Answer 1

以下是我为多张图片展示的方法。通过'this'传递图像元素可以避免使用任何ID。未经测试！

function decreaseSizeImage(img) { // will get back to its normal default size 
    if (img.height > 111) {
        img.height -= 1;
        img.width -= 1;
        setTimeout(function() {
            decreaseSizeImage(img);
        }, 6);
    }
}

function increaseSizeImage(img) {
    if (img.height < 222) {
        img.height += 1;
        img.width += 1;
        setTimeout(function () {
            increaseSizeImage(img);
        }, 6);
    }
}

...

<img src='myimage.png' onmouseover='decreaseSizeImage(this);' onmouseout='increaseSizeImage(this);'>
<img src='myimage2.png' onmouseover='decreaseSizeImage(this);' onmouseout='increaseSizeImage(this);'>

在几个图像上翻转时函数decreaseSizeImage（）

1 个答案: