Jquery 图像预览插件

Jquery Image preview plugin

本文关键字：插件 图像 Jquery      更新时间：2023-09-26

我正在使用在网络上找到的这个"插件"来预览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>

我想要的是使图像预览显示在可见的浏览器窗口中，而不是为其创建新空间（在链接位于浏览器窗口右下角的情况下）。我知道我必须玩弄定位，但是如何动态地做到这一点，以便图像仅出现在浏览器窗口的当前可查看内容中。

谢谢！

你的代码很好。你只需要把它添加到你的CSS样式（DEMO）

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

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

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

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

在示例中（根据 Dutchie432 的原始小提琴修改），如果您调整屏幕宽度的大小，如果预览离开屏幕，预览将从右向左切换。您可以修改代码以处理所有其他屏幕边缘（上/左/下）。

相关文章：