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


Posted in Javascript onAugust 17, 2015

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

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

运行效果截图如下:

js实现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程序设计有所帮助。

Javascript 相关文章推荐
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
javascript对象的相关操作小结
May 16 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
javascript中递归的两种写法
Jan 17 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 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
自己前几天写的无限分类类
2007/02/14 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
详解php协程知识点
2018/09/21 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
vue之延时刷新实例
2019/11/14 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
Python操作Access数据库基本步骤分析
2016/09/19 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
Java面试题汇总
2015/12/06 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
经贸专业毕业生求职信
2014/03/23 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫