像fb messenger一样在长按时增加图标/图像的大小

Question

想要制作像Facebook Messenger应用程序emojis这样的东西。 当我们长按表情符号时，它的大小会不断增加到某个极限。

我想在网页中为图片/图标开发相同内容。

我想使用css和JavaScript（如果需要）来制作。

Here的样本就像我想要执行的那样。

如果有人对此有所了解，那么请让我提一些提示。

Answer 1

我相信您可以设置间隔onmousedown事件，并清除该间隔onmouseup。更具体地说，您可以创建100毫秒的间隔，并在mousedown事件后每100毫秒增加元素的大小，并在mouseup事件后清除该间隔。

var interval; 
var img = $('#img');

img.mousedown(function(){
interval = setInterval(function(){
    var image = document.getElementById('img');
    image.width += 5;
    image.height += 5;
   }, 100);

    return false;
});

$(document).mouseup(function(){
   clearInterval(interval);
   return false;
});