即时创建新元素

Question

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

Answer 1

检查这个博客帖子（第2例）

Image Preview using jQuery

Working example

然后就检查出CSS和他使用的JS在那个例子中（提示：源代码）。

无法获取更容易那么这

Answer 2

你说你不想重新使用现有的插件 - 我可能会问，为什么？

我相信这thumbnail plugin会照顾你的确切位置后护理。实现这个要求的代码被简化为：

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

Answer 3

我同意你的看法，你真的不需要插件的一切。啥子你要做到的是非常简单的：

只要有一个绝对定位的div里面装有HTML页面的图像。给他们spcific IDS，那么，如果您使用的是完全相同的文件缩略图和预览你可以尝试这样的：

$('.thumbnails_class').mousemove(function(e) { 
    $('#preview_div').css({top: e.pageY, left: e.pageY}); 
    $('#preview_img').attr('src', $(this).attr('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')); 
}); 

在这个例子中我用文件名中的预览替换单词缩略图。

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

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

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

就是这样。进行必要的调整，你很好去。