ホームページ >ウェブフロントエンド >jsチュートリアル >js はアバター選択のリアルタイム プレビュー コードを実装します_javascript スキル
js はアバター選択のリアルタイム プレビュー コードを実装します_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:44:311539ブラウズ
この記事の例では、アバター選択のリアルタイム プレビュー コードの 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 プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。