javascript - Jquery 图片预览插件

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