jQuery/Javascript图像库如果悬停在X上则更改图像，但如果小于X则不更改图像

jQuery/Javascript image gallery change image if hovered over for X but not if less than X

本文关键字：图像 如果 小于 Javascript jQuery 悬停      更新时间：2023-09-26

这个问题可能有一个非常简单的答案，但我已经思考了一段时间，想不出它是什么。

我有一个带有缩略图和一个主图像的图像库，如果用户将鼠标悬停在一个缩略图上（例如500ms），我想更改主图像，但如果他们将鼠标拖动到其他缩略图上，则悬停的时间将小于500ms，因此我不希望更改图像。

感谢所有回复的人，刚刚想好并回来发布，但你们都打败了我，再次感谢！

好吧，您必须将javascript计时器与setTimeout（）和clearTimeout（。

基本上，当鼠标进入图像时，你会创建一个计时器——当光标离开时，你可以清除它：如果它还没有运行，它将被取消。

var timer;
$('img').mouseenter(function() {
    timer = setTimeout(function() {
        // do something here
    }, 500);
}).mouseleave(function() {
    clearTimeout(timer);
});

DEMO

试试这个。。。

var timeout;
$('.yourimages').mouseenter(function() {
    timeout = setTimeout(function() { // remember the "task" id so we can clear it if required
        //change image
    }, 500); // number of milliseconds to wait
}).mouseleave(function() {
    clearTimeout(timeout); // clear the timeout
});

它设置了一个定时器，在500毫秒后执行，但如果鼠标离开图像，则会重置。显然，您需要用图像类替换.yourimages，如果需要，您可以更改超时。

您可以使用这样的机制：

var myTimer;
$('#myElement').hover(function(){
setTimeout(function(){
alert('Now I''d be ready');
},500);
},function(){
clearTimeout(myTimer);
});

请参阅：https://developer.mozilla.org/en/DOM/window.setTimeout有关setTimeout() 的信息

另一件需要添加的事情可能是指向hoverIntent插件，这可能正是您想要的：http://cherne.net/brian/resources/jquery.hoverIntent.html

相关文章：