函数中具有错误值的变量-Javascript

我正在尝试根据倍增因子更改图像大小。在onmouseover事件中调用该函数，并在onmouseout中恢复imagen的先前大小

function cambiar_img_ampliando(imagen, inout, porcentaje)
{
    //Description of arguments:
    //(image element, onmouseover or onmouseout, % of size increase)
    var multiplicador = porcentaje/100; //Multiplier
    var alto = imagen.offsetHeight;
    var ancho = imagen.offsetWidth;
    if (inout==1) //onmouseover
    {
        var nuevo_alto = alto+(alto*multiplicador);
        var nuevo_ancho = ancho+(ancho*multiplicador);

        //Change the image size
        imagen.style.height = nuevo_alto+"px";
        imagen.style.width = nuevo_ancho+"px";

        //Adjust image position > To keep it center
        var top = (alto*multiplicador)/2;
        var left = (ancho*multiplicador)/2;
        imagen.style.top="-"+top+"px";
        imagen.style.left="-"+left+"px";
    }
    if (inout==0) //onmouseout
    {
       //Recover the original image size
       imagen.style.height = alto+"px";
       imagen.style.width = ancho+"px";

       //Replace image
       imagen.style.top="0px";
       imagen.style.left="0px";
    }
}

问题发生在

inout==0

部分（当onmouseout调用

0

值为

inout

参数的函数时）：

alto

和

ancho

变量无法正确恢复图像的原始大小值n。它似乎得到了变量

nuevo_alto

和

nuevo_ancho

的值。这很奇怪。。。因为如果我手动设置

ancho

和“alto”的值（特定像素），它运行正常，我已经检查了所有变量的范围，现在我不明白为什么这行：

imagen.style.height=alto+“px”

无法恢复图像的原始高度值

线路是否可能：

imagen.style.height=nuevo_alto+“px”
更改
“alto”
变量的值？
alto
和
ancho
每次调用
cambiar\u img\u ampliando
函数时都会计算值。因此，
alto
和
ancho
值将使用修改后的图像尺寸进行更新

定义
alto
和
ancho
外部
cambiar\u img\u ampliando
并赋值

你的代码可能是

var dims = {
    alto: {},
    ancho: {}
}

// function invoke 
cambiar_img_ampliando(imagen, inout, porcentaje, dims);

在您的
cambiar\u img\u ampliando
函数中

if (inout == 1) { //onmouseover
    if (!dims.alto[image_id]) {
        dims.alto[image_id] = imagen.offsetHeight;
        dims.ancho[image_id] = imagen.offsetWidth;
    }
    // rest of the code
}

if (inout == 0) { //onmouseout
   //Recover the original image size
   imagen.style.height = dims.alto[image_id]+"px";
   imagen.style.width = dims.ancho[image_id]+"px";
   // rest of the code
}

我想你应该

不使用var：

alto = imagen.offsetHeight;
ancho = imagen.offsetWidth;

而不是
var…
，这样您的变量将处于全局范围

每次调用函数时都会设置这些变量，这意味着它们始终具有当前图像维度，而不是原始维度。因此，您只需将它们设置在
mouseover
上，而不必设置在
mouseout
上：

if (inout==1) //onmouseover
{
     // Save original image size
     if (!alto) {
         alto = imagen.offsetHeight;
         ancho = imagen.offsetWidth;
     }
}


综合起来：

alto = 0;
ancho = 0;

function cambiar_img_ampliando(imagen, inout, porcentaje)
{
    //Description of arguments:
    //(image element, onmouseover or onmouseout, % of size increase)
    var multiplicador = porcentaje/100; //Multiplier
    if (inout==1) //onmouseover
    {
        // Save original image size
        if (!alto) {
            alto = imagen.offsetHeight;
            ancho = imagen.offsetWidth;
        }

        var nuevo_alto = alto+(alto*multiplicador);
        var nuevo_ancho = ancho+(ancho*multiplicador);

        //Change the image size
        imagen.style.height = nuevo_alto+"px";
        imagen.style.width = nuevo_ancho+"px";

        //Adjust image position > To keep it center
        var top = (alto*multiplicador)/2;
        var left = (ancho*multiplicador)/2;
        imagen.style.top="-"+top+"px";
        imagen.style.left="-"+left+"px";
    }
    if (inout==0) //onmouseout
    {
       //Recover the original image size
       imagen.style.height = alto+"px";
       imagen.style.width = ancho+"px";

       //Replace image
       imagen.style.top="0px";
       imagen.style.left="0px";
    }
}

我没有测试代码，但应该为您指出正确的方向：当图像处于原始大小时存储原始图像的尺寸，如果可能，只存储一次。希望这有帮助
@维努戈普拉：我想你已经足够接近了，但是
暗度
只能设置在原始图像的大小上。当触发
mouseout
时，图像已经缩放（从
mouseover
code），因此
offsetHeight
和
offsetWidth
被更改。。。我想…@厄本。是的，根据你的回答，我改进了我的方法，可以处理多个不同维度的图像，这很酷！实际上，还可以将此信息（原始维度）存储在image-DOM元素上（类似于
this.dims={w，h}
）。。。因此，在这个模型中不需要全局变量page@urban，那是perfect@urban声明不必要的全局变量会影响性能？你是我的英雄！！我没有意识到onmouseout也在改变变量><谢谢