函数内部的变量值很差 - Javascript

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与inout参数0值调用该函数）： alto和ancho变量不正确地恢复imagen画质的原始大小值。它似乎得到变量nuevo_alto和nuevo_ancho的值。这很奇怪......因为如果我手动设置了ancho和“alto”的值（对于某个像素），它运行正常，我一直在检查所有变量的范围，此时我不明白为什么这条线：imagen.style.height = alto+"px" 不恢复imagen画质的原始高度值...

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

Answer 1

我想你应该

1. 使用没有变种：

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

   而不是var ...，这样你的变量将在全球范围内。

2. 这些变量是设置每时间的函数被调用，这意味着他们总是有当前图像的尺寸，而不是原单之一。所以，你必须设置它们只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"; 
    } 
} 

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

Answer 2

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 
}