Maison > Article > interface Web > js implémente Sélectionner la sélection d'avatar Aperçu en temps réel Compétences code_javascript

js implémente Sélectionner la sélection d'avatar Aperçu en temps réel Compétences code_javascript

WBOYoriginal: 2016-05-16 15:44:311477parcourir

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js méthode simple pour augmenter dynamiquement le nombre de zones de saisie en cliquant sur un bouton dans un formulaire_javascript skillsArticle suivant：js méthode simple pour augmenter dynamiquement le nombre de zones de saisie en cliquant sur un bouton dans un formulaire_javascript skills

Articles Liés

Voir plus