代码随机停止工作

<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移至一个单独的文件中，并且代码突然停止工作...

您需要在加载页面之前定义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>

相关内容

最新更新

热门标签：