jQuery：图像高亮显示

这可能是一个简单的解决方案，但我只是没有看到它。我感谢你的帮助

我遵循以下指南：

演示指南：

这是我的代码（也在下面）：

多个问题：

• 它不显示缩放、加载和关闭图标
• 当您从上方移除鼠标时，覆盖不会消失 形象
• 图像正在“缩略图”下加载

HTML:

​JS:

/**
 * timeout to control the display of the overlay/highlight
 */
var highlight_timeout;

/**
 * user hovers one image:
 * create a absolute div with the same image inside,
 * and append it to the body
 */
$('img.ih_image').bind('mouseenter', function() {
    var $thumb = $(this);

    var $clone = $('<div />', {
        'id': 'ih_clone',
        'className': 'ih_image_clone_wrap',
        'html': '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',
        'style': 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
    });

    var highlight = function() {
        $('#ih_overlay').show();
        $('BODY').append($clone);
    }
    //show it after some time ... 
    highlight_timeout = setTimeout(highlight, 700);

    /**
     * when we click on the zoom, 
     * we display the image in the center of the window,
     * and enlarge it to the size of the real image, 
     * fading this one in, after the animation is over.
     */
    $clone.find('.ih_zoom').bind('click', function() {
        var $zoom = $(this);
        $zoom.addClass('ih_loading').removeClass('ih_zoom');
        var imgL_source = $thumb.attr('alt');

        $('<img class="ih_preview" style="display:none;"/>').load(function() {
            var $imgL = $(this);
            $zoom.hide();
            var windowW = $(window).width();
            var windowH = $(window).height();
            var windowS = $(window).scrollTop();

            $clone.append($imgL).animate({
                'top': windowH / 2 + windowS + 'px',
                'left': windowW / 2 + 'px',
                'margin-left': -$thumb.width() / 2 + 'px',
                'margin-top': -$thumb.height() / 2 + 'px'
            }, 400, function() {
                var $clone = $(this);
                var largeW = $imgL.width();
                var largeH = $imgL.height();
                $clone.animate({
                    'top': windowH / 2 + windowS + 'px',
                    'left': windowW / 2 + 'px',
                    'margin-left': -largeW / 2 + 'px',
                    'margin-top': -largeH / 2 + 'px',
                    'width': largeW + 'px',
                    'height': largeH + 'px'
                }, 400).find('img:first').animate({
                    'width': largeW + 'px',
                    'height': largeH + 'px'
                }, 400, function() {
                    var $thumb = $(this);
                    /**
                     * fade in the large image. Replace the zoom with a cross,
                     * so the user can close the preview mode
                     */
                    $imgL.fadeIn(function() {
                        $zoom.addClass('ih_close').removeClass('ih_loading').fadeIn(function() {
                            $(this).bind('click', function() {
                                $clone.remove();
                                clearTimeout(highlight_timeout);
                                $('#ih_overlay').hide();
                            });
                        });
                        $thumb.remove();
                    });
                });
            });
        }).error(function() {
            /**
             * error loading image. Maybe show a message : 'no preview available'?
             */
            $zoom.fadeOut();
        }).attr('src', imgL_source);
    });
}).bind('mouseleave', function() {
    /**
     * the user moves the mouse out of an image.
     * if there's no clone yet, clear the timeout
     * (user was probably scolling through the article, and 
     * doesn't want to view the image)
     */
    if ($('#ih_clone').length) return;
    clearTimeout(highlight_timeout);
});

/**
 * the user moves the mouse out of the clone.
 * if we don't have yet the cross option to close the preview, then
 * clear the timeout
 */
$('#ih_clone').live('mouseleave', function() {
    var $clone = $('#ih_clone');
    if (!$clone.find('.ih_preview').length) {
        $clone.remove();
        clearTimeout(highlight_timeout);
        $('#ih_overlay').hide();
    }
});​

/**
*控制覆盖/高亮显示的超时
*/
var-u超时；
/**
*用户将鼠标悬停在一个图像上：
*创建一个内部具有相同图像的绝对div，
*并将其附加到身体上
*/
$（'img.ih_image'）.bind（'mouseenter'，function（）{
var$thumb=$（这个）；
变量$clone=$（“”{
'id'：'ih_clone'，
“className”：“ih_image_clone_wrap”，
“html”：“，
'style'：'top:'+$thumb.offset（）.top+'px；left:'+$thumb.offset（）.left+'px；'
});
var highlight=function（）{
$（'ih#u overlay'）.show（）；
$（'BODY'）。追加（$clone）；
}
//过一段时间再展示。。。
highlight_timeout=setTimeout（highlight，700）；
/**
*当我们点击缩放按钮时，
*我们将图像显示在窗口的中心，
*并将其放大到真实图像的大小，
*动画结束后，淡入此动画。
*/
$clone.find（'.ih_zoom'）.bind（'click'，function（）{
var$zoom=$（这个）；
$zoom.addClass（'ih_loading'）。removeClass（'ih_zoom'）；
var imgL_source=$thumb.attr（'alt'）；
$（'我又看了一眼，有一个变化似乎确实产生了很大的不同

制作克隆时，您指定了一个设置

'className'：ih\u image\u clone\u wrap'，

将其替换为：

'class'：'ih\u image\u clone\u wrap'，

请参阅完整代码：

var $clone = $('<div />', {
    'id': 'ih_clone',
    'class': 'ih_image_clone_wrap',
    'html': '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',
    'style': 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
});

var$clone=$（“”{
'id'：'ih_clone'，
'class'：'ih_image_clone_wrap'，
“html”：“，
'style'：'top:'+$thumb.offset（）.top+'px；left:'+$thumb.offset（）.left+'px；'
});

此外，如果您从原始的
img
标签中删除
width
和
height
设置，图像大小差异将被修复，如您在注释中所述

如果您希望它是510 x 150，只需将相同的应用于您的克隆，您就可以开始了

除非我弄错了，否则这似乎解决了所有问题：


它不显示缩放、加载和关闭图标（已修复）
从图像上方移除鼠标时，覆盖不会消失（已修复）
图像正在“缩略图”下加载（已修复）

希望这能有所帮助。
我又看了一眼，有一个变化似乎确实起了很大的作用

制作克隆时，您指定了一个设置

'className'：ih\u image\u clone\u wrap'，

将其替换为：

'class'：'ih\u image\u clone\u wrap'，

请参阅完整代码：

var $clone = $('<div />', {
    'id': 'ih_clone',
    'class': 'ih_image_clone_wrap',
    'html': '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',
    'style': 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
});

var$clone=$（“”{
'id'：'ih_clone'，
'class'：'ih_image_clone_wrap'，
“html”：“，
'style'：'top:'+$thumb.offset（）.top+'px；left:'+$thumb.offset（）.left+'px；'
});

此外，如果您从原始的
img
标签中删除
width
和
height
设置，图像大小差异将被修复，如您在注释中所述

如果您希望它是510 x 150，只需将相同的应用于您的克隆，您就可以开始了

除非我弄错了，否则这似乎解决了所有问题：


它不显示缩放、加载和关闭图标（已修复）
从图像上方移除鼠标时，覆盖不会消失（已修复）
图像正在“缩略图”下加载（已修复）

希望这有帮助。
我将代码添加到了底部。我将代码添加到了底部。我必须假设问题是其他一些因素影响了这三件事，因为演示使用了
#ih#u clone
，它工作得很好。@Draven:它在演示中工作的原因是覆盖层没有覆盖您悬停的图像，因此de>mouseleave

可以在那里触发。你的覆盖覆盖了整个屏幕，因此你的鼠标指针无法在原始图像上触发

mouseleave

。我有另一个外观。我相信这是因为我在

img

标记中使用了宽度和高度。发现了另一个问题，是jQuery版本弄乱了事情up也是：（@Draven:

我不得不假设问题是其他一些东西影响了这三件事，你是对的：）简单地将克隆中的类设置从
className
修改为
class
似乎已经做到了。我更新了答案并添加了正确的演示。我还添加了一条关于您对图像大小的评论的注释。我不得不假设问题是其他一些因素影响了这三件事，因为演示使用了
#ih_clone
 “它工作得很好。@Draven:它在演示中工作的原因是覆盖层没有覆盖您悬停的图像，因此可以在那里触发
mouseleave
。您的覆盖层覆盖了整个屏幕，因此您的鼠标指针无法在原始图像上触发
mouseleave
。我有另一个外观。我相信。”这是因为我在
img
标记中使用了宽度和高度。我发现了另一个问题，是jQuery版本也把事情搞砸了：（@Draven:
我不得不假设问题是影响这三件事的其他问题，你是对的：）简单地修复从
className
到
class
的克隆中的类设置似乎已经完成了。我更新了答案并添加了更正的演示。我还添加了一条关于您对图像大小的评论的注释。
var $clone = $('<div />', {
    'id': 'ih_clone',
    'class': 'ih_image_clone_wrap',
    'html': '<img src="' + $thumb.attr('src') + '" alt="' + $thumb.attr('alt') + '"/><span class="ih_zoom"></span>',
    'style': 'top:' + $thumb.offset().top + 'px;left:' + $thumb.offset().left + 'px;'
});