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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
js字符编码函数区别分析
Dec 28 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 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维护文件系统
2006/10/09 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
php文件上传的两种实现方法
2016/04/04 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
python list转dict示例分享
2014/01/28 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
给校长的一封建议书
2014/03/12 职场文书
成语的广告词
2014/03/19 职场文书
房地产广告词大全
2014/03/19 职场文书
电力培训心得体会
2014/09/02 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS