javascript - 在鼠标悬停时调整图像大小 (Javascript/MooTools)

Question

我建立了一个网页，该网页应该在鼠标悬停时增加图像的大小。 由于系统限制，我不会用更大的图像替换图像，而是“拉伸(stretch)”现有图像。

这是网页: 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 了。

有问题可以留言