Question

我有一个img元素。当用户将鼠标悬停在它上面时，我想在鼠标附近创建一个新的div，在div中使用相同的图像 - 就像预览一样。我不想使用现有的插件。有没有一种简单的方法来实现它？

Answer 1

你说你不想重复使用现有的插件 - 请问为什么？

我相信这thumbnail plugin会完全照顾你的目标。实现此目的所需的代码减少为：

<script>
$("img").thumbPopup({
  imgSmallFlag: "_s",
  imgLargeFlag: "_l"
});
</script>

Answer 2

我同意你的观点，你真的不需要任何插件。你想要完成的事情非常简单：

只需要一个绝对定位的div，其中的图像内部加载了页面html。给他们特定的ID，然后，如果你使用完全相同的文件缩略图和预览，你可以尝试类似的东西：

$('.thumbnails_class').mousemove(function(e) {
    $('#preview_div').css({top: e.pageY, left: e.pageY});
    $('#preview_img').attr('src', $(this).attr('src'));
});

我没有测试过代码，但我猜它会正常工作。如果您没有为缩略图和预览使用相同的图像，您仍然可以使用类似的技术，只需使用缩略图的src属性来创建预览src：

$('.thumbnails_class').mousemove(function(e) {
    $('#preview_div').css({top: e.pageY, left: e.pageY});
    $('#preview_img').attr('src', $(this).attr('src').replace(/thumb/, 'preview'));
});

在这个例子中，我用文件名中的预览替换了单词thumb。

最后，您需要显示/隐藏预览：

$('.thumbnails_class').mouseover(function() {
   $('#preview_div').show();
});

$('.thumbnails_class').mouseout(function() {
   $('#preview_div').hide();
});

就是这样。做出必要的调整，你就可以了。

Answer 3

查看此博客帖子（第2个示例）

Image Preview using jQuery

Working example

然后查看CSS和他在该示例中使用的JS（提示：源代码）。

比这个

更容易

动态创建一个新元素

3 个答案: