javascript - 如何检查工具提示图像是否超出屏幕

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


  // starting the script on page load
   $(document).ready(function(){
  imagePreview();
  });

这是演示代码。 <强> http://jsfiddle.net/uVXTf/1/ 。当工具提示离开屏幕时，请注意它的显示滚动。我希望工具提示在 x 位置检测到页面结尾时应将位置更改为右侧。

Answer 1

如果您使用 jQuery UI's position function ，您可以定义碰撞时应该发生什么:

来自文档:

collision (default: "flip")

Type: String When the positioned elementoverflows the window in some direction, move it to an alternativeposition. Similar to my and at, this accepts a single value or a pairfor horizontal/vertical, e.g., "flip", "fit", "fit flip", "fit none".

"flip": Flips the element to the opposite side of the target and thecollision detection is run again to see if it will fit. Whichever sideallows more of the element to be visible will be used.

"fit": Shiftthe element away from the edge of the window.

"flipfit": First appliesthe flip logic, placing the element on whichever side allows more ofthe element to be visible. Then the fit logic is applied to ensure asmuch of the element is visible as possible.

"none": Does not apply anycollision detection.