0

当您将鼠标悬停在缩略图上时，我遇到了图像预览的问题。我可以更改预览和光标之间的距离，但是如果缩略图靠近窗口的一侧，则预览不合适，您只能看到其中的一部分..希望这是有道理的...

有没有办法让它如果预览不适合，它会显示在光标的另一侧？....

这是脚本...

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("slow");
    },
    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://img202.imageshack.us/img202/4991/browserpreviewf.jpg

我的图像在页面的右上角，所以当我将 img 悬停时，我的预览会更进一步，除了页面滚动条之外，一半的预览可用.. 如何获得光标左侧的预览..

4

4 回答 4

3

我建议使用一个工具提示插件，它可以为您完成所有肮脏的定位工作。有很多可用的，我将向您展示如何使用jQuery Tooltip来实现。

前提是您具有以下标记：

  <ul>
    <li><a href="bigimage.jpg"><img src="preview.jpg" /></a></li>
    <li><a href="big2.jpg"><img src="prev2.jpg" /></a></li>
  </ul>

我想你明白了（链接到大图，预览图是链接）。然后您可以按如下方式使用工具提示插件：

$(document).ready(function() {
    $('img').tooltip({
        bodyHandler: function() {
            return $("<img/>").attr("src", $(this).parent().attr("href"));
        }
    });
});

（它有很多选项，你们都可以在演示页面上进行测试）。

这可能需要一些解释。每次显示工具提示时，插件都会执行该bodyHandler功能。我们使用这个函数来生成工具提示将包含的 HTML。所以这里发生的神奇之处在于，我们从超链接中提取大图像 url 并动态创建具有相同 src 的新图像。然后此图像将显示为工具提示。

当然，您可以在那里生成任何（嵌套）HTML，包括标题等，但出于演示目的，这应该足够了。

你可以在这里查看结果！

（您看到的所有样式都是纯 CSS，所以不用担心，您可以根据自己的要求进行调整）

于 2010-04-13T16:04:08.277 回答
1

下面的示例并不完全符合您的要求......但它做了类似的事情......

if(e.pageX <= $(document).width()/2){
    $("#preview")
        .css({"top": (e.pageY - xOffset) + "px",
             "left": (e.pageX + yOffset) + "px",
             "right":""});
}
else{
    $("#preview")
        .css({"top": (e.pageY - xOffset) + "px",
             "right": ($(document).width() - e.pageX + yOffset) + "px",
             "left":""});
}

如果光标位于页面右侧，则预览将向左移动。如果光标在页面的左侧，它将向右移动。

您将不得不玩弄逻辑和定位以使其正确。

于 2010-04-13T15:31:16.593 回答
0

您可以使用（例如）玩弄窗口宽度：

window.innerWidth

你有一个xOffset变量，e.pageY所以你可以从中推断出一些东西。

if (e.pageX + xOffset > (window.innerWidth - <somevalue>){....

旁白：你的意思是这样做：

e.pageX + yOffset

即添加和X和Y值？

于 2010-04-07T11:08:06.827 回答
0

您还可以使用

screen.availWidth

获取浏览器显示区域宽度的属性...

此属性返回宽度减去滚动条和我存在的其他窗口组件占用的空间......

从我的头顶开始......虽然设置预览的位置而不是设置顶部和左侧，当工具提示的计算位置大于窗口宽度时，您可以尝试设置顶部和右侧......？

于 2010-04-10T04:35:50.797 回答