编程 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 相关文章推荐

JavaScript 加号(+)运算符号

Dec 06 Javascript

zTree插件之多选下拉菜单实例代码

Nov 06 Javascript

javascript动态添加checkbox复选框的方法

Dec 23 Javascript

javascript拖拽应用实例

Mar 25 Javascript

jQuery UI结合Ajax创建可定制的Web界面

Jun 22 Javascript

基于Bootstrap的标签页组件及bootstrap-tab使用说明

Jul 25 Javascript

jquery实现侧边栏左右伸缩效果的示例

Dec 19 jQuery

微信小程序模版渲染详解

Jan 26 Javascript

iview table高度动态设置方法

Mar 14 Javascript

从零开始在NPM上发布一个Vue组件的方法步骤

Dec 20 Javascript

WebWorker 封装 JavaScript 沙箱详情

Nov 02 Javascript

JavaScript实现两个数组的交集

Mar 25 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代码

2007/03/08 PHP

php自动获取目录下的模板的代码

2010/08/08 PHP

PHP sprintf() 函数的应用(定义和用法)

2012/06/29 PHP

PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)

2013/07/02 PHP

PHP在网页中动态生成PDF文件详细教程

2014/07/05 PHP

php将文本文件转换csv输出的方法

2014/12/31 PHP

用PHP代码在网页上生成图片

2015/07/01 PHP

Nginx环境下PHP flush失效的解决方法

2016/10/19 PHP

phpStudy 2016 使用教程详解（支持PHP7）

2017/10/18 PHP

php图片合成方法(多张图片合成一张)

2017/11/25 PHP

PHP xpath()函数讲解

2019/02/11 PHP

js word表格动态添加代码

2010/06/07 Javascript

javascript跨域刷新实现代码

2011/01/01 Javascript

11种ASP连接数据库的方法

2015/09/18 Javascript

利用jQuery和CSS将背景图片拉伸

2015/10/16 Javascript

jQuery实现分隔条左右拖动功能

2015/11/21 Javascript

浅谈js和css内联外联注意事项

2016/06/30 Javascript

jquery基本选择器匹配多个元素的实现方法

2016/09/05 Javascript

jQuery easyui刷新当前tabs的方法

2016/09/23 Javascript

最常用的jQuery表单验证(简单)

2017/05/23 jQuery

解决Vue2.0自带浏览器里无法打开的原因（兼容处理）

2017/07/28 Javascript

前端axios下载excel文件(二进制)的处理方法

2018/07/31 Javascript

nodejs简单抓包工具使用详解

2019/08/23 NodeJs

javascript实现动态时钟的启动和停止

2020/07/29 Javascript

JS实现商城秒杀倒计时功能(动态设置秒杀时间)

2019/12/12 Javascript

vue中提示$index is not defined错误的解决方式

2020/09/02 Javascript

JS+CSS实现过渡特效

2021/01/02 Javascript

python正则表达式的使用

2017/06/12 Python

使用Django启动命令行及执行脚本的方法

2018/05/29 Python

Python的垃圾回收机制详解

2019/08/28 Python

python opencv 图像边框(填充)添加及图像混合的实现方法（末尾实现类似幻灯片渐变的效果）

2020/03/09 Python

Python 打印自己设计的字体的实例讲解

2021/01/04 Python

美国在线面料商店：Online Fabric Store

2018/07/26 全球购物

美团网旗下网上订餐平台：美团外卖

2020/03/05 全球购物

大学军训感言1000字

2014/02/25 职场文书

计算机实训心得体会

2016/01/14 职场文书