Rumah >hujung hadapan web >tutorial js >js melaksanakan Select avatar selection kemahiran pratonton masa nyata code_javascript

js melaksanakan Select avatar selection kemahiran pratonton masa nyata code_javascript

WBOY
WBOYasal
2016-05-16 15:44:311536semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan js bagi kod pratonton masa nyata pemilihan avatar Select. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah demonstrasi pelaksanaan js pemilihan avatar Pilih dan pratonton masa nyata kesannya Apabila meninggalkan mesej atau ulasan, pengguna boleh memilih avatar dengan mudah Sudah tentu, bentuk lain juga boleh digunakan, seperti hari ini This Select, kotak drop-down untuk memilih avatar, juga merupakan pengalaman yang baik.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/

Kod khusus adalah seperti berikut:

<!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>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn