Question

我已经尝试过几十个图像缩放jQuery插件，但不希望所有花哨的加载效果，因为我希望在页面上显示数百个缩略图（其中，每个jQuery插件都用于图像缩放，需要加载大图像或者在页面上加载大拇指和大图像），这需要2-3分钟来加载所有底层大图像。我只需要一个简单脚本的例子，当鼠标悬停在缩略图上时，弹出窗口（DIV标签，它）显示大图像（加载ON-DEMAND）。当鼠标远离大图像时，它会消失/关闭。

website showing example of exactly what I'm trying to do

上面的站点链接基本上显示了我想要做的事情（示例不是使用jQuery，而是一些过于膨胀的第三方控件）。

我计划的是一个显示几百个缩略图的网格，因此按需是必须的 - 不需要花哨的动画。

我计划使用最新版本的jQuery-UI

我怎么能这样做？是否有jQuery的按需图像弹出插件？

Answer 1

您可以在jQuery中使用悬停事件。创建div以在鼠标移入时加载大图像并在鼠标移出时销毁div。这是一个简单的例子（smallImage将有一个“bigImageSrc”属性来保存大图像的来源）：

$(".smallImage").hover(function(){
    //move in function
    var bigImage = $("<div></div>").appendTo(".bigDiv");
    $("<img></img>").attr("src",$(this).attr("bigImageSrc")).appendTo(bigImage);
    $(this).data("bigImage",bigImage);
}, function(){
    //move out function
    var bigImage = $(this).data("bigImage");
    bigImage.remove();
    $(this).data("bigImage",null);
});

jQuery的图像弹出窗口（DIV），可根据需要加载大图像

1 个答案: