Question

我正在尝试创建一个缩略图图像，该图像会动画为更大的版本并保持该版本5秒钟，然后在单击“查看”按钮时返回其原始大小。我绝对需要使用window.setInterval和window.clearInterval方法。

这是我到目前为止的尝试：https://jsfiddle.net/Lm1y51pb/1/

var myVar = setInterval(function(){ enlargeImg() }, 5000); // expand for 5 seconds

    function enlargeImg() {
      var img = document.getElementById("myImg"); 
      var width = 0;
      var height = 0;
      // how do I expand the image with this so far?
    }

    function myStopFunction() {

        if(5000 secs have passed)
        clearInterval(myVar);
    }

我在放大图像方面遇到了问题，主要是在myStopFunction（）中，如果已经过了5秒，请停止上面的功能。

最大宽度和高度为500px。

Answer 1

这应该有效：

var myVar = setInterval(function(){ enlargeImg() }, 5000);

function enlargeImg() {
  var img = document.getElementById("myImg"); 
  var width = 0;
  var height = 0;
  img.style.width = 'auto';
  img.style.height = 'auto';
}

<img id="myImg" src="http://i.imgur.com/XCCso5f.jpg" alt="" width="250" height="250" /> 
<button onclick="enlargeImg()">View</button>

使用setInterval＆amp;创建扩展图像。 clearInterval？

1 个答案: