编程 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 相关文章推荐

JS获取图片实际宽高及根据图片大小进行自适应

Aug 11 Javascript

Script标签与访问HTML页面详解

Jan 10 Javascript

ExtJS4 表格的嵌套 rowExpander应用

May 02 Javascript

jQuery创建自定义的选择器用以选择高度大于100的超链接实例

Mar 18 Javascript

JQuery点击事件回到页面顶部效果的实现代码

May 24 Javascript

解析JavaScript实现DDoS攻击原理与保护措施

Dec 26 Javascript

vue组件实例解析

Jan 10 Javascript

基于vuejs实现一个todolist项目

Apr 11 Javascript

Ionic项目中Native Camera的使用方法

Jun 07 Javascript

js实现可以点击收缩或张开的悬浮窗

Sep 18 Javascript

动态统计当前输入内容的字节、字符数的实例详解

Oct 27 Javascript

Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

Dec 23 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获取当前所在目录位置的方法

2014/11/26 PHP

Yii2中YiiBase自动加载类、引用文件方法分析(autoload)

2016/07/25 PHP

PHP常用日期加减计算方法实例小结

2018/07/31 PHP

PHP设计模式入门之迭代器模式原理与实现方法分析

2020/04/26 PHP

在textarea中显示html页面的javascript代码

2007/04/20 Javascript

js实现在字符串中提取数字

2013/11/05 Javascript

js中的getAttribute方法使用示例

2014/08/01 Javascript

浅谈JavaScript中Date(日期对象),Math对象

2015/02/05 Javascript

JS中获取函数调用链所有参数的方法

2015/05/07 Javascript

JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码

2015/09/15 Javascript

JavaScript实现的浮动层框架用法实例分析

2015/10/10 Javascript

JavaScript头像上传插件源码分享

2016/03/29 Javascript

JavaScript数组操作函数汇总

2016/08/05 Javascript

JS 调用微信扫一扫功能

2016/12/22 Javascript

Vue+abp微信扫码登录的实现代码示例

2020/01/06 Javascript

vue中axios防止多次触发终止多次请求的示例代码（防抖）

2020/02/16 Javascript

浅谈Vue开发人员的7个最好的VSCode扩展

2021/01/20 Vue.js

基于JavaScript实现随机点名器

2021/02/25 Javascript

在Python中封装GObject模块进行图形化程序编程的教程

2015/04/14 Python

python实现提取百度搜索结果的方法

2015/05/19 Python

解析Mac OS下部署Pyhton的Django框架项目的过程

2016/05/03 Python

Python小白必备的8个最常用的内置函数（推荐）

2019/04/03 Python

Python使用线程来接收串口数据的示例

2019/07/02 Python

python生成器用法实例详解

2019/11/22 Python

python基于event实现线程间通信控制

2020/01/13 Python

python神经网络编程实现手写数字识别

2020/05/27 Python

高级技校毕业生自荐信

2013/11/18 职场文书

爱国卫生月实施方案

2014/02/21 职场文书

党员承诺书格式

2014/05/21 职场文书

岗位职责说明书模板

2014/07/30 职场文书

2014年党员整改措施

2014/10/24 职场文书

维稳工作情况汇报

2014/10/27 职场文书

暑期辅导班宣传单

2015/07/14 职场文书

elasticSearch-api的具体操作步骤讲解

2021/06/28 Java/Android

ElementUI实现el-form表单重置功能按钮

2021/07/21 Javascript

oracle delete误删除表数据后如何恢复

2022/06/28 Oracle