jQuery悬停效果图像预览从浏览器的窗口中消失 [英] jQuery hover effect image preview going out of the browser's window

问题描述

我使用的是jquery效果.它是鼠标悬停时的图像预览.问题是，当我将鼠标悬停在左侧图像上时，它显示得很好，但是当我将鼠标悬停在右侧图像上时，图像预览就会从浏览器的窗口中消失出现垂直/水平滚动条.我想在光标的右侧显示图像，以便它们保留在浏览器的窗口内.我应该使用此代码做什么?

I'm using a jquery effect.it's an image preview on mouse hover.The problem is when i hover on the left images it displays well but when i hover the right ones,the image preview go out of the browser's window and vertical/horizontal scroll bars appears.I want to display the image on the cursor's right side so that they remain inside the browser's window.What should i do with this code?

this.imagePreview = function(){ 
/* CONFIG */

    xOffset = 10;
    yOffset = 30;

    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

/* END CONFIG */
$("a.preview").hover(function(e){
    this.t = this.title;
    this.title = "";    
    var c = (this.t != "") ? "<br/>" + this.t : "";
    $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("fast");                        
},
function(){
    this.title = this.t;    
    $("#preview").remove();
}); 
    $("a.preview").mousemove(function(e){
        $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
    });         
};      

推荐答案

所需计算的快速示例.我只是对宽度(X)进行了数学计算.高度(Y)由您决定.

A quick example of needed calculations. I only made the math for width (X). Height (Y) is up to you.

http://jsfiddle.net/teae5/3/

如果预览与a.preview在相同的Y坐标上，则有时您将鼠标悬停在预览本身而不是链接上，并且预览将关闭.至少使用这种方法.

If your preview is on the same Y coordinates as a.preview, at some point you will hover over preview itself and not the link, and preview will close. At least with this approach.

这篇关于jQuery悬停效果图像预览从浏览器的窗口中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！