Jquery 动态创建新元素

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

你说你不想重复使用现有的插件-我可以问一下为什么吗

我相信这会完全照顾到你的需求。实现此功能所需的代码减少为：

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

$（“img”）.thumbPopup({
imgSmallFlag:“\u s”，
imglargegflag:“\u l”
});

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

然后看看他在那个例子中使用的CSS和JS（提示：sourcecode）

---

再简单不过了

我同意你的看法，你真的不需要什么插件。你想要完成的事情很简单：

只要有一个绝对定位的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'));
});

在本例中，我在文件名中用preview替换了thumb这个词

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

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

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

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