在鼠标上调整图像大小（Javascript / MooTools）

Question

我已经建立了一个网页，它应该增加图像的大小。我不是用较大的图像替换图像，而是因为系统限制而“拉伸”现有的图像。

这是网页：http://www.catmoviez.com/IMDBQueries.aspx

您可以看到电影图像在您使用时会变大。

问题是当我移动鼠标太快时，有时图像被卡住打开或导致无限闪烁。

附件也是我用于调整大小的代码：

function resizeImage(elem,width,height){
    var myEffect = new Fx.Morph(elem, {duration: 350});
    myEffect.start({'height': height,'width': width});
}

Answer 1

首先，将此变量设置在函数之外

var imagegrow

然后将鼠标悬停在此处

function () {
    imagegrow = setTimeout(function(){ resizeImage(elem,width,height); },1000);
}

这个鼠标：

function () {
    clearTimeout(imagegrow);
}

调整1000数字以适合您的首选延迟（以毫秒为单位）。我会为你编写完整的代码，但我还没有使用MooTools一段时间。

如果您有任何疑问，请评论

Answer 2

法鲁兹，高斯是对的，你需要使用超时。但是，考虑使用moazools的addEvent函数，如mootools docs以及$$ function中所述，它将使您能够实现更优雅的功能，其方式如下：

window.addEvent('domready', function() {
  $$("tr td input").addEvent("mouseover", function() {
    //anonymous function like Gaussie's here
  });
});

请注意，这不是确切的代码，它需要进行一些修改，但它更清晰，并且应该比设置每个图像的onmouseover属性更有效。另外，请记住这是HTML文档的头部。