Question

当您将鼠标悬停在缩略图上时出现image preview时出现问题。我可以更改预览和光标之间的距离，但如果缩略图靠近窗口的一侧，预览不适合，你只能看到它的一部分..希望有意义......

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

这是脚本......

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时，我的预览更加正确，除了页面滚动条一半预览可用....如何获取光标左侧的预览..

Answer 1

我建议使用工具提示插件来完成所有脏定位工作。有dozens available，我将向您展示如何使用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"));
        }
    });
});

（它有很多选项，你们都可以在demo page测试。）

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

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

You can check out the result here!

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

Answer 2

下面的例子并不完全是你要问的......但是它做了类似的事情......

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

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

您必须使用逻辑并定位一点以使其正确。

Answer 3

您可以使用（例如）：

来播放窗口宽度

window.innerWidth

您有一个xOffset变量和e.pageY，因此您可以从中推断出一些内容。

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

除此之外：你的意思是这样做：

e.pageX + yOffset

即。添加X和Y值？

Answer 4

您也可以使用

screen.availWidth

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

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

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

Jquery图像预览插件问题

4 个答案:

You can check out the result here!