Créer un nouvel élément à la volée

Question

J'ai un élément img. Lorsque l'utilisateur passe la souris dessus, je veux créer un nouveau div près de la souris avec la même image dans le div - quelque chose comme un aperçu. Je ne veux pas utiliser un plug-in existant. Y a-t-il un moyen simple de l'atteindre?

Answer 1

Vérifiez ce post du blog (2ème exemple)

Image Preview using jQuery

Working example

Ensuite, il suffit de consulter la CSS et un JS il a utilisé dans cet exemple (indice: code source).

Impossible d'obtenir beaucoup plus facile alors ce

Answer 2

Vous dites que vous ne voulez pas réutiliser un plugin existant - puis-je vous demander pourquoi?

Je crois que ce thumbnail plugin prendra soin de ce que vous recherchez. Le code nécessaire pour mettre en œuvre ce se réduit à:

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

Answer 3

Je suis d'accord avec vous, pour tout ce que vous avez vraiment pas besoin de plug-ins. Waht vous essayez d'accomplir est très simple:

Juste avoir un div positionné absolu avec une image à l'intérieur chargé de la page html. Donnez-leur spcific ids, puis, si vous utilisez exactement les mêmes fichiers pour les vignettes et les aperçus que vous pouvez essayer quelque chose comme:

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

Je ne l'avais pas testé le code, mais je suppose que cela fonctionnera bien. Si vous n'êtes pas en utilisant les mêmes images aussi bien pour les vignettes et les aperçus, vous pouvez toujours utiliser une technique similaire, il suffit d'utiliser l'attribut src de la vignette pour créer le src aperçu:

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

Dans cet exemple i remplacer le mot pouce par un aperçu dans les noms de fichiers.

Enfin, vous devez afficher/cacher l'aperçu:

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

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

Et voilà. Faites les ajustements nécessaires et vous êtes prêt à partir.