如何使用setInterval放大图像

Question

我想要实现图像点击时，它会放大一段时间。到目前为止，我在我的JS到这里，但它不起作用

var image = document.getElementById('pic'); 

function enlarge() { 
    image.style.height="600px"; 
} 

image.onclick =enlarge; 

我试图实施后。

var image = document.getElementById('pic'); 

function enlarge() { 
    image.style.height="600px"; 
} 

image.onclick = setInterval(enlarge; 1000); 

我该如何实施？ JSFIDDLE

Answer 1

使用的setInterval

我们希望60fps的，所以每一帧都是1000/60，约等于16.667ms。我们需要将高度增加500px。 500/60等于8.334。因此，我们需要的16.667毫秒的间隔，每次迭代，通过8.334px放大图像，并停止在高度达到600px：

var images = document.querySelectorAll('.pic'); 
 

 
images.forEach(function(image) { 
 
    image.addEventListener('click', enlarge); 
 
}); 
 

 
function enlarge(e) { 
 
    var image = e.target; 
 
    var interval; 
 
    var height = 100; 
 
    
 
    interval = setInterval(function() { 
 
    height += 8.334; 
 
    
 
    if(height >= 600) { 
 
     height = 600; 
 
     clearInterval(interval); 
 
    } 
 
    
 
    image.style.height = height + 'px'; 
 
    }, 16.667); 
 
}

.pic { 
 
    width: 100px; 
 
    height: 100px; 
 
    vertical-align: top; 
 
}

<img src='https://placehold.it/100x100' class='pic'> 
 
<img src='https://placehold.it/100x100' class='pic'>

---

使用requestAnimationFrame

一个更好的方法，将使用requestAnimationFrame()，产生更流畅的动画。据MDN：

的window.requestAnimationFrame（）方法告诉你 希望执行的动画，并请求浏览器调用 指定功能的下一个重绘之前更新动画的浏览器。

数学保持不变，但requestAnimationFrame将处理在16.667ms之后调用下一帧。

var images = document.querySelectorAll('.pic'); 
 

 
images.forEach(function(image) { 
 
    image.addEventListener('click', enlarge); 
 
}); 
 

 
function enlarge(e) { 
 
    var image = e.target; 
 
    var interval; 
 
    var height = 100; 
 
    
 
    function enlargeInner() { 
 
    height += 8.334; 
 
    
 
    if(height >= 600) { 
 
     height = 600; 
 
    } 
 
    
 
    image.style.height = height + 'px'; 
 
    
 
    height < 600 && requestAnimationFrame(enlargeInner); 
 
    } 
 
    
 
    enlargeInner(); 
 
}

.pic { 
 
    width: 100px; 
 
    height: 100px; 
 
    vertical-align: top; 
 
}

<img src='https://placehold.it/100x100' class='pic'> 
 
<img src='https://placehold.it/100x100' class='pic'>

Answer 2

您只是在一个区间中分配相同的高度。你需要增加它，如：

image.style.height = (+image.style.height + 600) + "px"; 

但我想这是不是你的目标，因为它会让你的形象成长600px每一秒。我认为你正在寻找的只是把它扩大到实际的尺寸？如果是这样，请尝试使用CSS transition与JavaScript相结合，如：

CSS：

img { 
    width: 300px; 
    height: 300px; 
    -webkit-transition: width 1s linear, height 1s linear; 
    transition: width 1s linear, height 1s linear; 
} 
.enlarged { 
    width: 600px; 
    height: 600px; 
} 

JS：

document.getElementById('pic').addEventListener("click", function(e){ 
    this.classList.toggle("enlarged"); 
} 

Answer 3

我forked your fiddle。

你需要改变你接近click事件，像这样的方式：

function enlarge() { 
    setInterval(function() { 
    // do stuff 
    }, 1000) 
} 

image.onclick = enlarge; 

Answer 4

的setInterval（）只是将无法正常工作。

基本上你的代码正在做什么，它等待1000毫秒，并运行放大功能。

（顺便说一下，你有一个错字，在最后一行，应该有放大到1000之间的逗号）

的方式，我会做到这一点是添加CSS类的动画，并然后将该类添加到单击图像上。

let myImg = document.getElementById("img1"); 
 
myImg.addEventListener("click",() => myImg.classList.toggle("enlarge")); 
 

 

 
/* 
 

 
The code above is using ES6 (the newest version of JavaScript) and and a thing called an arrow function. If you don't get it, here is the "normal way" to do it. It will do exactly the same as the above code. 
 

 
var myImg = document.getElementById("img1"); 
 
myImg.addEventListener("click", function(){ 
 
    myImg.classList.toggle("enlarge") 
 
}); 
 

 

 
*/

#img1 { 
 
    transition: 1s 
 
} 
 
.enlarge { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<img id="img1" src="https://foswiki.org/pub/Support/Glossary/600px-Example.svg.png" width="100px" height="100px">