图像弹出（DIV）的jQuery，加载大图像点播

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

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

上面基本上该网站链接显示正是我想要做什么（例子中没有使用jQuery，但在一些臃肿的第三方控制）。

我的计划是让网格显示多达数百个缩略图，因此按需是绝对必要的 - 不需要花哨的动画。

我打算使用最新版本的jQuery的UI

我会如何去吗？有没有针对jQuery的按需图像弹出式插件？

来源

2014-01-15 MC9000

您可以在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); 
});

来源

2014-01-15 04:03:31 qqfish

图像弹出（DIV）的jQuery，加载大图像点播

回答

相关问题