编程 Javascript

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

Posted in Javascript onAugust 17, 2015

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

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

运行效果截图如下：

在线演示地址如下：

具体代码如下：

<!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头像选择实时预览代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

Dec 14 Javascript

jQuery页面加载初始化常用的三种方法

Jun 04 Javascript

JavaScript实现广告的关闭与显示效果实例

Jul 02 Javascript

Bootstrap选项卡与Masonry插件的完美结合

Jul 06 Javascript

js中遍历对象的属性和值的方法

Jul 27 Javascript

关于JavaScript 原型链的一点个人理解

Jul 31 Javascript

JS FormData上传文件的设置方法

Jul 05 Javascript

[js高手之路]图解javascript的原型(prototype)对象,原型链实例

Aug 28 Javascript

前端开发之便利店收银系统代码

Dec 27 Javascript

Openlayers测量距离与面积的实现方法

Sep 25 Javascript

Openlayers实现测量功能

Sep 25 Javascript

微信小程序实现简单购物车功能

Dec 30 Javascript

基于jquery实现放大镜效果

Aug 17 #Javascript

js实现浏览本地文件并显示扩展名的方法

Aug 17 #Javascript

JS模仿编辑器实时改变文本框宽度和高度大小的方法

Aug 17 #Javascript

js实现匹配时换色的输入提示特效代码

Aug 17 #Javascript

js实现表单Radio切换效果的方法

Aug 17 #Javascript

js下拉选择框与输入框联动实现添加选中值到输入框的方法

Aug 17 #Javascript

jquery动感漂浮导航菜单代码分享

Apr 15 #Javascript

You might like

创建数据库php代码用PHP写出自己的BLOG系统

2010/04/12 PHP

最近项目写了一些js，水平有待提高

2009/01/31 Javascript

手把手教你自己写一个js表单验证框架的方法

2010/09/14 Javascript

有关js的变量作用域和this指针的讨论

2010/12/16 Javascript

阻止子元素继承父元素事件具体思路及实现

2013/05/02 Javascript

JS模拟自动点击的简单实例

2013/08/08 Javascript

javascript中字符串拼接详解

2014/09/26 Javascript

JS自定义选项卡函数及用法实例分析

2015/09/02 Javascript

jquery实现九宫格大转盘抽奖

2015/11/13 Javascript

JS判断微信扫码的方法

2017/08/07 Javascript

Angular利用trackBy提升性能的方法

2018/01/26 Javascript

Angular学习教程之RouterLink花式跳转

2018/05/03 Javascript

详解webpack引入第三方库的方式以及注意事项

2019/01/15 Javascript

微信小程序与公众号卡券/会员打通的问题

2019/07/25 Javascript

VsCode里的Vue模板的实现

2020/08/12 Javascript

JavaScript数组排序的六种常见算法总结

2020/08/18 Javascript

[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG

2014/07/11 DOTA

[08:04]TI4西雅图DOTA2前线报道海涛探访各路人马

2014/07/09 DOTA

Python中的字典与成员运算符初步探究

2015/10/13 Python

举例讲解Python的lambda语句声明匿名函数的用法

2016/07/01 Python

django批量导入xml数据

2016/10/16 Python

python程序快速缩进多行代码方法总结

2019/06/23 Python

python 爬取学信网登录页面的例子

2019/08/13 Python

pandas中的数据去重处理的实现方法

2020/02/10 Python

python 爬虫之selenium可视化爬虫的实现

2020/12/04 Python

应届生高等护理求职信

2013/10/12 职场文书

最新的咖啡店创业计划书

2013/12/30 职场文书

护士试用期自我鉴定

2014/02/08 职场文书

小学生综合素质评语

2014/04/23 职场文书

网络营销策划方案

2014/06/04 职场文书

公司授权委托书格式范文

2014/10/02 职场文书

2014年扶贫帮困工作总结

2014/12/09 职场文书

2015年南京大屠杀纪念日活动总结

2015/03/24 职场文书

2015年外联部工作总结

2015/04/03 职场文书

社区党建工作总结2015

2015/05/13 职场文书

python实现MD5进行文件去重的示例代码

2021/07/09 Python