代碼隨機停止工作

-1

<img id="myImg" src="http://shushi168.com/data/out/193/37281782-random-image.png" onmouseover="zoomIn()" onmouseout="zoomOut()"> 


function zoomIn(){ 
     alert("test"); 
    var element = document.getElementById("myImg"); 
    var newWidth = 450; 
    var newHeight = 200; 
    if((element.width != newWidth) && (element.height != newHeight)){ 
     var zoomStart = function(){ 
      element.width += 1.5; 
      element.height += 1; 
      if((element.height < newHeight) && (element.width < newWidth)){ 
       setTimeout(zoomStart, 10); 
      }  
     } 
     zoomStart(); 
    } 
    } 



function zoomOut(){ 
     var element = document.getElementById("myImg"); 
     alert("begin2 " + element.width +" "+ element.height); 
     var originalWidth = 300; 
     var originalHeight = 100; 
     if((element.width != originalWidth) && (element.height != originalHeight)){ 
      var zoomStart = function(){ 
       element.width -= 1.5; 
       element.height -= 1; 
       if((element.height > originalHeight) && (element.width > originalWidth)){ 
        setTimeout(zoomStart, 10); 
       }  
      } 
      zoomStart(); 
     } 
    }

https://jsfiddle.net/j3dgrzaz/1/代碼隨機停止工作

見我的代碼上面的js小提琴。

當鼠標移過它時圖像應該放大，當鼠標離開它時再次變小。

該代碼工作正常。我將css移動到單獨的文件中，並且代碼突然停止工作...

來源

2016-12-01 LikeToLearnStuff

已包含CSS文件轉換成HTML文件？ –

這實際上並不隨機，這是對刺激的直接反應。只是在說'。 – Paul

如果您在小提琴中查看開發者控制檯，您會看到您的錯誤 - 「zoomIn（）'和'zoomOut（）'未定義。 – Craicerjack

您需要在加載頁面之前定義javascript函數。所以轉移到頭，它會正常工作。

https://jsfiddle.net/j3dgrzaz/7/

<head> 

<script> 
function zoomIn(){ 
     alert("test"); 
    var element = document.getElementById("myImg"); 
    var newWidth = 450; 
    var newHeight = 200; 
    if((element.width != newWidth) && (element.height != newHeight)){ 
     var zoomStart = function(){ 
      element.width += 1.5; 
      element.height += 1; 
      if((element.height < newHeight) && (element.width < newWidth)){ 
       setTimeout(zoomStart, 10); 
      }  
     } 
     zoomStart(); 
    } 
    } 

    function zoomOut(){ 
     var element = document.getElementById("myImg"); 
     alert("begin2 " + element.width +" "+ element.height); 
     var originalWidth = 300; 
     var originalHeight = 100; 
     if((element.width != originalWidth) && (element.height != originalHeight)){ 
      var zoomStart = function(){ 
       element.width -= 1.5; 
       element.height -= 1; 
       if((element.height > originalHeight) && (element.width > originalWidth)){ 
        setTimeout(zoomStart, 10); 
       }  
      } 
      zoomStart(); 
     } 
    } 

</script> 


</head>

來源

2016-12-01 11:30:24 mrid

或者只是添加'window.zoomIn = zoomIn; window.zoomOut = zoomOut;'在js的結尾，而不是將代碼移動到html以暴露它們？ – Strille

是的，這也會起作用！ – mrid

@Strille js代碼無論如何都是暴露的。這個答案解決了函數沒有找到的問題，但這兩個小提琴似乎都沒有做什麼（即沒有放大或縮小）。 –

代碼隨機停止工作

回答

相關問題