Question

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

这是网页： 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

Faruz，Gaussie是对的，你需要使用超时。但是，请考虑使用mootools的addEvent函数，如mootools docs以及$$ function中所述，这将使您能够实现更优雅的功能，如下所示：

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

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

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

2 个答案: