L'exemple de cet article décrit l'implémentation js du code d'aperçu en temps réel de la sélection d'avatar Select. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Voici une démonstration de l'implémentation js de la sélection de l'avatar et de l'aperçu en temps réel de l'effet. Lorsqu'ils laissent un message ou un commentaire, les utilisateurs peuvent facilement sélectionner un avatar. Dans le passé, la méthode la plus courante consistait à utiliser un bouton radio. Bien entendu, d'autres formulaires peuvent également être utilisés, comme aujourd'hui This Select, la boîte déroulante permettant de sélectionner un avatar, est également une bonne expérience.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/
Le code spécifique est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>select头像选择代码</title> </head> <body> <select name=lanrentuku onchange="document.images['idface'].src=options[selectedIndex].value;"> <option value="images/ico1.gif" >头像01</option> <option value="images/ico2.gif" >头像02</option> <option value="images/ico3.gif" >头像03</option> </select> <div style="position:absolute;"><img src="images/ico1.gif" id=idface></div> </body> </html>
J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
