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

Question

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

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 变量无法正确恢复图像的原始大小值。似乎得到了变量 nuevo_alto 和 nuevo_ancho 的值。这很奇怪......因为如果我手动设置 ancho 和 "alto" 的值（到某个像素）它运行正常，我一直在检查变量的所有范围，此时我可以'明白为什么这一行：imagen.style.height = alto+"px" 没有恢复图像的原始高度值...

这条线是否可能： imagen.style.height = nuevo_alto+"px"; 更改 "alto" 变量的值？

Answer 1

每次调用 cambiar_img_ampliando 函数时，都会计算

alto 和 ancho 值。因此 alto 和 ancho 值会使用修改后的图像尺寸进行更新。

在 cambiar_img_ampliando 之外定义 alto 和 ancho 并赋值。

您的代码可以是

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

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

在你的cambiar_img_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
}

Answer 2

我觉得你应该

不使用变量：
```
alto = imagen.offsetHeight;
ancho = imagen.offsetWidth;
```
而不是 var ...，这样您的变量将处于全局范围内。
这些变量在函数被调用时每次设置，这意味着它们始终具有当前图像尺寸，而不是原始尺寸。所以你必须在 mouseover 上设置它们 only 而不是 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";
    }
}

我没有测试代码，但应该为您指出正确的方向：当图像处于原始尺寸时存储原始图像的尺寸，并尽可能只存储一次。希望对你有帮助

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

Variables inside a function with bad values - Javascript

javascript

variables

size

scope

image