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，则可以定义碰撞应该发生的事情：

来自文档：

碰撞（默认：“翻转”）

类型：String当定位元素时   窗口向某个方向溢出，移动到另一个方向   位置。与my和at类似，它接受单个值或一对   对于水平/垂直，例如“翻转”，“适合”，“适合翻转”，“不适合”。

“翻转”：将元素翻转到目标的另一侧和   再次运行碰撞检测以查看它是否适合。无论哪一方   允许使用更多可见的元素。

“适合”：转变   元素远离窗口边缘。

“flipfit”：首先适用   翻转逻辑，将元素放在任何一侧允许更多   要看的元素。然后应用拟合逻辑以确保as   大部分元素尽可能可见。

“none”：不适用   碰撞检测。

Answer 2

我对您的代码进行了一些小修改，您可以在此处查看结果：http://jsfiddle.net/ubjUz/

$("a.preview").mousemove(function (e) {

    var previewPosition = $("#preview").position().left + $("#preview").width();
    var windowWidth = $(window).width();

    if (previewPosition > windowWidth) {
        $("#preview").css("left", (windowWidth - $("#preview").width()) + "px");
    } else {
        $("#preview")
            .css("top", (e.pageY - xOffset) + "px")
            .css("left", (e.pageX + yOffset) + "px");
    }

});

如何检查工具提示图像是否在屏幕外

2 个答案: