函數內部的變量值很差 - 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 
}