编程 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实例教程(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