Question

我有一些代码会直接在任何超链接上显示图像。不幸的是，如果图像直接在光标上填充，则似乎存在冲突：

您可以看到代码适用于小图片。但是大图像会闪烁。如何让图像停止闪烁。我认为显示图像的位置需要远离超链接。

jQuery(document).ready(function() {

    jQuery("<div id='player-image-hover'></div>").appendTo("body").css("position", "absolute").css("z-index", "1000").css("padding", "2px").css("backgroundColor", "#666");

    jQuery("a[href^='http://thepoolscene.com/player-profile']").each(function() {
        var title = jQuery(this).attr("title");
        title = title.toLowerCase();
        title = ucwords(title);
        var url = "http://" + window.location.host + "/wp-content/gallery/playerphotos/" + escape(title) + ".jpg";
        // var o = jQuery(this).offset();
        var that = this;
        jQuery.ajax({
            url: url,
            type: 'HEAD',
            error: function() { 
                console.log('doesnt exist: ' + url);
            },
            success: function() {
                //var image_preload = new Image(100,25); 
                //image_preload.src = url;
                if (jQuery("#player-image-hover").find("img[src='" + url + "']").length == 0) {
                    jQuery("#player-image-hover").append("<img src='" + url + "' height='220' style='display:none'>");
                }
                jQuery(that).hover(
                    function() {
                      var o = jQuery(this).offset();
                      jQuery("#player-image-hover").css("left", o.left).css("top", o.top-222).css("display", "block").find("img[src='" + url + "']").css("display", "block");
                    },
                    function() {
                      jQuery("#player-image-hover").css("display", "none").find("img").css("display", "none");
                    }
                );
            }
        });
    });

});

function ucwords (str) {
  // http://kevin.vanzonneveld.net
  // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
  // +   improved by: Waldo Malqui Silva
  // +   bugfixed by: Onno Marsman
  // +   improved by: Robin
  // +      input by: James (http://www.james-bell.co.uk/)
  // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // *     example 1: ucwords('kevin van  zonneveld');
  // *     returns 1: 'Kevin Van  Zonneveld'
  // *     example 2: ucwords('HELLO WORLD');
  // *     returns 2: 'HELLO WORLD'
  return (str + '').replace(/^([a-z\u00E0-\u00FC])|\s+([a-z\u00E0-\u00FC])/g, function ($1) {
    return $1.toUpperCase();
  });
}

Answer 1

我认为这种情况正在发生，因为当您将鼠标悬停在覆盖它的图像的链接上时，onmouseout事件会在链接上触发并隐藏图像。然后再次触发onmouseover并继续循环。

以下插件可能有助于解决问题。 http://cherne.net/brian/resources/jquery.hoverIntent.html

这可以在触发handlerOut之前添加超时。此外，如果您决定添加两种类型的悬停，它还支持事件委派。

Answer 2

另一种方法是在链接下方显示图像，或者如果您仍想在上面显示它：

你应该使用javascript来检查图像的高度并在正确的位置显示图像（即代替顶部：o.top - 222，你使用o.top - imageHeight）。

为此你需要等待图像的onload事件，当它完成加载时你需要获得图像的高度，设置位置并显示它。

Answer 3

我不相信这种情况正在发生，因为图像正在加载。它只会短暂地闪烁（并且图像不会完全出现）。这种闪烁是一致的。

我相信，因为较大的图片正在链接前加载，所以它干扰了浏览器对链接的mousover / mouseout / hover状态的解释并导致脚本反复射击，隐藏和揭示图像。

如果你有Photoshop，你可以很容易地测试这个理论。使用颜色模式（CMYK占用的空间比RGB占用的空间大于灰度）和JPEG压缩可以使文件大小相对较大的物理小图像和文件大小相对较小的物理大图像。

现在，至于解决这个问题的方法（除了坚持不会阻止链接的小图片）我确定有方法，但它必须来来自比我更熟练的人。我怀疑答案涉及使用计时器来限制脚本可以触发的频率（虽然这会产生副作用）。

Answer 4

感谢大家的建议......别人为我提供了解决方案：

jQuery(document).ready(function() {

jQuery("<div id='player-image-hover'></div>").appendTo("body").css("position", "absolute").css("z-index", "1000").css("padding", "2px").css("backgroundColor", "#666");
jQuery("#player-image-hover").mouseleave(function() {
    jQuery("#player-image-hover").css("display", "none").find("img").css("display", "none");
});

jQuery("a[href^='http://thepoolscene.com/player-profile']").each(function() {
    var title = jQuery(this).attr("title");
    title = title.toLowerCase();
    title = ucwords(title);
    var url = "http://" + window.location.host + "/wp-content/gallery/playerphotos/" + escape(title) + ".jpg";
    // var o = jQuery(this).offset();
    var that = this;
    jQuery.ajax({
        url: url,
        type: 'HEAD',
        error: function() { 
            console.log('doesnt exist: ' + url);
        },
        success: function() {
            //var image_preload = new Image(100,25); 
            //image_preload.src = url;
            if (jQuery("#player-image-hover").find("img[src='" + url + "']").length == 0) {
                jQuery("#player-image-hover").append("<img src='" + url + "' height='220' style='display:none'>");
            }
            jQuery(that).mouseenter(function() {
                var o = jQuery(this).offset();
                jQuery("#player-image-hover").css("left", o.left).css("top", o.top-222).css("display", "block").find("img[src='" + url + "']").css("display", "block");
            });
        }
    });
});

});

function ucwords (str) {
// http://kevin.vanzonneveld.net
// +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// +   improved by: Waldo Malqui Silva
// +   bugfixed by: Onno Marsman
// +   improved by: Robin
// +      input by: James (http://www.james-bell.co.uk/)
// +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// *     example 1: ucwords('kevin van  zonneveld');
// *     returns 1: 'Kevin Van  Zonneveld'
// *     example 2: ucwords('HELLO WORLD');
// *     returns 2: 'HELLO WORLD'
return (str + '').replace(/^([a-z\u00E0-\u00FC])|\s+([a-z\u00E0-\u00FC])/g,           function ($1) {
return $1.toUpperCase();
});
}

如何在悬停时指定图像的位置

4 个答案: