编程 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 表单验证常见正则

Sep 28 Javascript

下载文件个别浏览器文件名乱码解决办法

Mar 19 Javascript

js动态添加事件并可传参数示例代码

Oct 21 Javascript

JavaScript中for..in循环陷阱介绍

Nov 12 Javascript

JS+JSP checkBox 全选具体实现

Jan 02 Javascript

jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）

May 19 jQuery

微信小程序实现倒计时60s获取验证码

Apr 17 Javascript

vue.js组件vue-waterfall-easy实现瀑布流效果

Aug 22 Javascript

vue仿淘宝订单状态的tab切换效果

Jun 23 Javascript

vue.js项目打包上线的图文教程

Nov 16 Javascript

jQuery中图片展示插件highslide.js的简单dom

Apr 22 jQuery

JavaScript 截取字符串代码实例

Sep 05 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

动漫女神老婆无限好，但日本女生可能就不是这么一回事了！

2020/03/04 日漫

使用PHP Socket写的POP3类

2013/10/30 PHP

写一段简单的PHP建立文件夹代码

2015/01/06 PHP

详解WordPress中添加和执行动作的函数使用方法

2015/12/29 PHP

PHP面向对象程序设计之类与反射API详解

2016/12/02 PHP

JavaScript 异步调用框架 (Part 1 - 问题 & 场景)

2009/08/03 Javascript

JQuery下关于$.Ready()的分析

2009/12/13 Javascript

Javascript类定义语法,私有成员、受保护成员、静态成员等介绍

2011/12/08 Javascript

在jQuery ajax中按钮button和submit的区别分析

2012/10/07 Javascript

jQuery事件 delegate()使用方法介绍

2012/10/30 Javascript

jQuery之ajax技术的详细介绍

2013/06/19 Javascript

JS两种定义方式的区别、内部原理

2013/11/21 Javascript

javascript中的this详解

2014/12/08 Javascript

javascript计时器详解

2015/02/28 Javascript

javascript解析xml实现省市县三级联动的方法

2015/07/25 Javascript

JavaScript中数组添加值和访问值常见问题

2016/02/06 Javascript

jQuery的Read()方法代替原生JS详解

2016/11/08 Javascript

input获取焦点时底部菜单被顶上来问题的解决办法

2017/01/24 Javascript

js实现自定义进度条效果

2017/03/15 Javascript

详解react-native-fs插件的使用以及遇到的坑

2017/09/12 Javascript

angular中ui calendar的一些使用心得(推荐)

2017/11/03 Javascript

微信小程序实现长按删除图片的示例

2018/05/18 Javascript

详解js类型判断

2018/05/22 Javascript

vue实现循环切换动画

2018/10/17 Javascript

javascript中的数据类型检测方法详解

2019/08/07 Javascript

解决ant Design Search无法输入内容的问题

2020/10/29 Javascript

使用PDB简单调试Python程序简明指南

2015/04/25 Python

css3实例教程一款纯css3实现的环形导航菜单

2014/10/20 HTML / CSS

巴黎一票通：The Paris Pass

2018/02/10 全球购物

营销专业应届生求职信

2013/11/26 职场文书

开办化妆品公司创业计划书

2013/12/26 职场文书

房屋租赁协议书（标准版）

2014/10/02 职场文书

农民工工资支付承诺书

2015/05/04 职场文书

2015年小学生暑假总结

2015/07/13 职场文书

军训结束新闻稿

2015/07/17 职场文书

Spring Data JPA框架Repository自定义实现

2022/04/28 Java/Android