Question

我正在使用jquery效果。它是鼠标悬停时的图像预览。问题是当我将鼠标悬停在左侧图像上时显示效果很好但是当我将鼠标悬停在右侧时，图像预览会进入出现在浏览器的窗口和垂直/水平滚动条之外。我想在光标的右侧显示图像，以便它们保留在浏览器的窗口内。我该怎么办这段代码？

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");
    });         
};

Answer 1

需要计算的快速示例。我只对宽度（X）进行了数学计算。高度（Y）取决于你。

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

如果您的预览与a.preview位于相同的Y坐标上，则在某些时候您将悬停在预览本身而不是链接上，预览将关闭。至少用这种方法。

Answer 2

您需要进行一些计算，将e.pageX和e.pageY与预览元素的窗口宽度/高度和宽度/高度进行比较，看它是否适合窗口。

您可以使用$(window).width() & $(window).height()

获取窗口尺寸

根据计算，您可以设置您的位置以补偿

jQuery悬停效果图像预览走出浏览器的窗口

2 个答案: