1

如何检查工具提示图像是否超出屏幕。我想如果图像不在屏幕上，那么工具提示图像应该是左侧或右侧，它不应该走出屏幕并制作滚动条。这是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 位置检测到页面结尾，我希望工具提示应将位置更改为右侧。

4

2 回答 2

2

如果你使用jQuery UI 的 position 函数，你可以定义碰撞时应该发生什么：

从文档中：

碰撞（默认：“翻转”）

类型：字符串 当定位元素在某个方向溢出窗口时，将其移动到另一个位置。与 my 和 at 类似，它接受单个值或水平/垂直对，例如，“flip”、“fit”、“fit flip”、“fit none”。

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

“fit”：将元素从窗口边缘移开。

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

“none”：不应用任何碰撞检测。

于 2013-05-24T10:27:23.580 回答
1

我对你的代码做了一些小的修改，你可以在这里看到结果：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");
    }

});
于 2013-05-24T10:30:38.393 回答