Question

我正在网上使用这个“插件”在php / linux网站上预览一些图像。

<script type="text/javascript">
function pimg()
{
    this.xOffset = 5;
    this.yOffset = 50;
    $("a.pimg").hover(function (e)
    {
        this.img_title = this.title;
        this.title = "";
        var img_src = $(this).attr('img_src');
        var desc = (this.img_title != "") ? "<h3>" + this.img_title + "</h3>" : "";
        var image = (img_src) ? img_src : this.src;
        $("body").append("<div id='pimg'><img src='" + image + "' alt='Image preview' />" + desc + "</div>");
        $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
        $("#pimg").fadeIn(700);
    }, function ()
    {
        this.title = this.img_title;
        $("#pimg").remove();
    });
    $("a.pimg").mousemove(function (e)
    {
        $("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
};
$(document).ready(function($){
    pimg();
}) 
</script>

<div class="images">
                  <a href="#" img_src='<?=TF?>/img/design/testimonials/Tuscg.png' class="pimg">View Testimonial</a>
            </div>

我想要的是让图像预览出现在可见的浏览器窗口内，而不是为它创建新的空间（在链接位于浏览器窗口右下方的情况下）。我知道我必须使用定位，但是如何才能使用它来使图像仅出现在浏览器窗口的当前可查看内容中。

谢谢！

Answer 1

你的代码很好。您只需将其添加到CSS样式（DEMO）

即可

#pimg{position:absolute;display:none;}

除此之外，您只需要将此代码修改为您想要的正确x / y坐标。

$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");

Answer 2

看看这个更新的小提琴：http://jsfiddle.net/Wp6bG/1/

在示例中（基于Dutchie432的原始小提琴修改），如果您调整屏幕宽度，如果预览在屏幕外，预览将从右向左切换。您可以修改代码以处理所有其他屏幕边缘（顶部/左侧/底部。）

Jquery图像预览插件

2 个答案: