この記事の例では、アバター選択のリアルタイム プレビュー コードの js 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは、アバターの選択とエフェクトのリアルタイム プレビューの js 実装のデモです。これまでは、ユーザーがメッセージやコメントを残すときにアバターを簡単に選択できました。もちろん、他のフォームも使用できます。たとえば、アバターを選択するためのドロップダウン ボックスである This Select も良い経験になります。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/
具体的なコードは次のとおりです:
<!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>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
