jQuery悬停效果图像预览退出浏览器'；窗户

我使用的是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");
    });         
};      

this.imagePreview=function（）{
/*配置*/
xOffset=10；
yOffset=30；
//这两个变量确定弹出窗口与光标的距离
//您可能需要调整以获得正确的结果
/*结束配置*/
$（“a.preview”）.hover（函数（e）{
this.t=this.title；
this.title=“”；
var c=（this.t！=”）？“
”+this.t:”；
$（“正文”）。追加（“
”+c+”
”；
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）
.fadeIn（“快速”）；
},
函数（）{
this.title=this.t；
$（“#预览”）.remove（）；
}); 
$（“a.preview”）.mousemove（函数（e）{
$（“预览”）
.css（“顶部”（e.pageY-xOffset）+“px”）
.css（“左”（e.pageX+yOffset）+“px”）；
});         
};      

您需要进行一些计算，将

e.pageX

和

e.pageY

与预览元素的窗口宽度/高度和宽度/高度进行比较，以确定它是否适合窗口

您可以使用

$（window.width（）&$（window.height（）

---

根据计算结果，然后设置位置以补偿所需计算的快速示例。我只计算了宽度（X）。高度（Y）由您决定

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

在页面上设置和示例，或给我们您正在处理的页面，以便我们了解发生了什么