编程 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 继承实现方法

Aug 26 Javascript

javascript与CSS复习(三)

Jun 29 Javascript

jquery 简单应用示例总结

Aug 09 Javascript

jQuery如何取id有.的值一般的方法是取不到的

Apr 18 Javascript

Javascript数组Array方法解读

Mar 13 Javascript

Javascript 引擎工作机制详解

Nov 30 Javascript

AngularJS中update两次出现$promise属性无法识别的解决方法

Jan 05 Javascript

vue.js移动端app实战1：初始配置详解

Jul 24 Javascript

ajax请求+vue.js渲染+页面加载的示例

Feb 11 Javascript

jQuery实现基本淡入淡出效果的方法详解

Sep 05 jQuery

vue 属性拦截实现双向绑定的实例代码

Oct 24 Javascript

jquery绑定事件 bind和on的用法与区别分析

May 22 jQuery

基于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

linux系统上支持php的 iconv()函数的方法

2011/10/01 PHP

[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】

2017/09/02 PHP

javascript 精粹笔记

2010/05/09 Javascript

jQuery.Validate 使用笔记(jQuery Validation范例 )

2010/06/25 Javascript

使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法

2011/04/07 Javascript

jquery操作select大全

2014/04/25 Javascript

angularJS提交表单（form）

2015/02/09 Javascript

JavaScript中原型和原型链详解

2015/02/11 Javascript

JS+CSS实现实用的单击输入框弹出选择框的方法

2015/02/28 Javascript

详解JavaScript函数对象

2015/11/15 Javascript

JS模仿手机端九宫格登录功能实现代码

2016/04/28 Javascript

Bootstrap组件学习之导航、标签、面包屑导航(精品)

2016/05/17 Javascript

jQuery的事件预绑定

2016/12/05 Javascript

bootstrap选项卡使用方法解析

2017/01/11 Javascript

在 Angular2 中实现自定义校验指令（确认密码）的方法

2017/01/23 Javascript

Mac系统下Webstorm快捷键整理大全

2017/05/28 Javascript

AngularJS常见过滤器用法实例总结

2017/07/06 Javascript

js es6系列教程 - 基于new.target属性与es5改造es6的类语法

2017/09/02 Javascript

为jquery的ajax请求添加超时timeout时间的操作方法

2018/09/04 jQuery

webpack4 入门最简单的例子介绍

2018/09/05 Javascript

微信小程序实现两个页面传值的方法分析

2018/12/11 Javascript

PHP读取远程txt文档到数组并实现遍历

2020/08/25 Javascript

vue 项目软键盘回车触发搜索事件

2020/09/09 Javascript

详解Vue3 Teleport 的实践及原理

2020/12/02 Vue.js

[04:09]2018年度DOTA2社区贡献奖-完美盛典

2018/12/16 DOTA

Python字符串替换实例分析

2015/05/11 Python

Python使用文件锁实现进程间同步功能【基于fcntl模块】

2017/10/16 Python

python处理大日志文件

2019/07/23 Python

使用Python实现正态分布、正态分布采样

2019/11/20 Python

python将邻接矩阵输出成图的实现

2019/11/21 Python

基于django micro搭建网站实现加水印功能

2020/05/22 Python

电气专业应届生求职信

2013/11/01 职场文书

优秀生推荐信范文

2013/11/28 职场文书

模范家庭事迹材料

2014/02/10 职场文书

后勤管理员岗位职责

2014/08/27 职场文书

一年之计：2019年下半年的计划

2019/05/07 职场文书