AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

js实现Select头像选择实时预览代码

51自学网 http://www.wanshiok.com
js,Select,头像选择,实时预览

本文实例讲述了js实现Select头像选择实时预览代码。分享给大家供大家参考。具体如下:

这里演示js实现Select头像选择,实时预览效果,在留言或评论的时候,让用户简易的选择头像,以前最常见的方式是使用单选框,当然使用其它的形式也可以,比如今天这个Select,下拉选框选择头像,也是不错的体验。

运行效果截图如下:

在线演示地址如下:

http://demo.wanshiok.com/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程序设计有所帮助。


js,Select,头像选择,实时预览  
上一篇:js模拟淘宝网的多级选择菜单实现方法  下一篇:基于jquery实现放大镜效果