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 ms的间隔，并且每次迭代都会按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

setInterval（）只能胜任。

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

（顺便说一句，你有一个拼写错误，在最后一行，放大和1000之间应该有一个逗号）

我这样做的方法是添加一个带动画的css类，然后在点击时将该类添加到图像中。

＆＃13;

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")
});


*/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我https://www.google.com/search?q=wordpress+slider+plugin。

您需要改变接近点击事件的方式，如下所示：

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

image.onclick = enlarge;

如何使用setInterval放大图像

4 个答案: