Question

这基本上是我的代码在单击图像时会执行的操作，然后最大化（动画）

var image = document.getElementById('pic');

image.addEventListener('click', enlarge);

function enlarge() {
  var interval;
  var height = 100;
  
  interval = setInterval(function() {
    height += 7.9365;
    
    if(height >= 600) {
      height = 600;
      clearInterval(interval);
    }
    
    image.style.height = height + 'px';
  }, 16);
}

#pic {
  width: 100px;
  height: 100px;
}

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

但是现在我想实现更多的img，所以当我点击单独的img时它会动画。

    $("img").click(function() {
    alert(this.id); // or alert($(this).attr('id'));

});

我如何放置这些功能

Answer 1

也许你想要这样的东西？

＆＃13;

$(document).ready(function() {
  
  	$(".pic").click(function() {
    	enlarge(this);
    });
    
   

	function enlarge(obj) {
    var interval;
    var height = 100;

    interval = setInterval(function() {
      height += 7.9365;

      if(height >= 600) {
        height = 600;
        clearInterval(interval);
      }

       $(obj).css("height",height);
    }, 16);
}
});

＆＃13;

.pic {
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='https://placehold.it/100x100' class='pic'>
<img src='https://placehold.it/100x100' class='pic'>
<img src='https://placehold.it/100x100' class='pic'>

＆＃13;

如何实现/压缩代码

1 个答案: