代码随机停止工作

-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代码无论如何都是暴露的。这个答案解决了函数没有找到的问题，但这两个小提琴似乎都没有做什么（即没有放大或缩小）。 –

代码随机停止工作

回答

相关问题