Question

我正在制作素材库。我有一页缩略图。当用户将鼠标悬停在缩略图上时，会弹出相应的视频（在jquery对话框中）。我注意到，当我使用鼠标滚轮滚动页面时，我的光标经常快速通过很多图像，我得到一堆视频弹出并一个接一个地快速消失，这是不可取的。所以我添加了一些代码来检测滚动，这解决了问题 - 除了当滚动停止时，如果光标最终停留在其中一个图像上，则不会触发弹出视频。我必须将鼠标移动到另一个图像上才能触发弹出窗口。如果光标在滚动结束时落在图库图像上，是否可以添加或更改以触发视频？我正在使用hoverIntent，但同样的事情适用于标准的jquery悬停。相关的代码部分是：

var notScrolling = true;

$(window).scroll(function() {
        notScrolling = false;
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        notScrolling = true;
    }, 250));
});

// When the window is not being scrolled, and the mouse enters a gallery item,
// the corresponding pop-up will open and any other pop-up will be closed:
$.each(galleryAnchorArray, function( index, value ){
        var galleryThis = value;
        var hoverThisAndCloseOthers = function() {
            hoveringId = index;
            if (notScrolling == true) {OpenPopup(); CloseOthers()}};
        $(galleryThis).hoverIntent(hoverThisAndCloseOthers, hovOutDoNothing)
    });

Answer 1

当滚动停留在图片上时，该图片的悬停事件已经发生且您的if (notScrolling == true)已将其阻止，因此您需要做的是再次触发悬停事件，如< / p>

$.data(this, 'scrollTimer', setTimeout(function() {
    notScrolling = true;
    //your hover event or function corresponding to that event here
    hoverThisAndCloseOthers();//just an eg. how you use this is up to you
}, 250));

Answer 2

非常感谢帮助shaN！以下现在几乎就像我想要的那样工作，虽然当我快速滚动后停止时，我的光标稍微高于或低于缩略图，附近缩略图的弹出视频会被触发。我完全可以忍受，但也许我会玩定时器值（毫秒）。

var notScrolling = true;

$.each(galleryAnchorArray, function( index, value ){
        var galleryThis = value;
        var hoverThisAndCloseOthers = function() {
            hoveringId = index;
            if (notScrolling == true) {OpenPopup(); CloseOthers()};
            $(window).scroll(function() {
                notScrolling = false;
                clearTimeout($.data(this, 'scrollTimer'));
                $.data(this, 'scrollTimer', setTimeout(function() {
                    notScrolling = true;
                    OpenPopup();
                    CloseOthers()
                    }, 250));
                });
            };
        $(galleryThis).hoverIntent(hoverThisAndCloseOthers, hovOutDoNothing);
    });

在鼠标滚轮滚动期间阻止Jquery hoverIntent

2 个答案: