Question

我正在尝试根据乘数因子更改图像大小。该函数已在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变量无法正确恢复imagen的原始大小值。似乎得到变量nuevo_alto和nuevo_ancho的值。这很奇怪...因为如果我手动设置ancho和“alto”的值（到某个像素）它运行正常，我一直在检查变量的所有范围，此时我不能理解为什么这一行：imagen.style.height = alto+"px" 无法恢复图像的原始高度值...

该行有可能： imagen.style.height = nuevo_alto+"px"; 更改"alto"变量的值？

Answer 1

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

ancho和cambiar_img_ampliando个值。因此，使用修改后的图片尺寸更新alto和ancho值。

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

你的代码可能是

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

我认为你应该

使用no 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"; } }

我没有测试过代码，但是应该指向正确的方向：当图像处于原始大小时，存储原始图像的尺寸，如果可能，只存储一次。希望它有所帮助

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

2 个答案: