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

手机端页面rem宽度自适应脚本

May 20 Javascript

jquery滚动特效集锦

Jun 03 Javascript

JS实现的多张图片轮流播放幻灯片效果

Jul 22 Javascript

JavaScript中的冒泡排序法

Aug 03 Javascript

原生javascript实现分页效果

Apr 21 Javascript

前端跨域的几种解决方式总结（推荐）

Aug 16 Javascript

JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

Jan 29 Javascript

mongodb初始化并使用node.js实现mongodb操作封装方法

Apr 02 Javascript

vue cli3.0 引入eslint 结合vscode使用

May 27 Javascript

javascript中this的用法实践分析

Jul 29 Javascript

Javascript confirm多种使用方法解析

Sep 25 Javascript

vue使用Sass时报错问题的解决方法

Oct 14 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的Laravel框架中Eloquent对象关系映射使用

2016/02/26 PHP

isArray()函数(JavaScript中对象类型判断的几种方法)

2009/11/26 Javascript

Javascript面象对象成员、共享成员变量实验

2010/11/19 Javascript

jQuery之end()和pushStack()使用介绍

2012/02/07 Javascript

ie7+背景透明文字不透明超级简单的实现方法

2014/01/17 Javascript

浅谈JS中json数据的处理

2016/06/30 Javascript

JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法

2016/08/19 Javascript

javascript如何创建对象

2016/08/29 Javascript

实例浅析js的this

2016/12/11 Javascript

jQuery实现淡入淡出的模态框

2017/02/09 Javascript

js实现二级菜单点击显示当前内容效果

2018/04/28 Javascript

TypeScript的安装、使用、自动编译的实现

2020/04/10 Javascript

[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/16 DOTA

python有证书的加密解密实现方法

2014/11/19 Python

跟老齐学Python之使用Python查询更新数据库

2014/11/25 Python

使用SAE部署Python运行环境的教程

2015/05/05 Python

python 基础教程之Map使用方法

2017/01/17 Python

linux环境下python中MySQLdb模块的安装方法

2017/06/16 Python

Python之dict(或对象)与json之间的互相转化实例

2018/06/05 Python

PyCharm代码提示忽略大小写设置方法

2018/10/28 Python

python使用selenium登录QQ邮箱（附带滑动解锁）

2019/01/23 Python

postman传递当前时间戳实例详解

2019/09/14 Python

python异步编程使用yield from过程解析

2019/09/25 Python

Python MySQL 日期时间格式化作为参数的操作

2020/03/02 Python

Clarins娇韵诗英国官网：来自法国的天然护肤品牌

2017/04/18 全球购物

Skyscanner波兰：廉价航班

2017/11/07 全球购物

办公室文员工作自我评价

2013/12/01 职场文书

事业单位公务员的职业生涯规划

2014/01/15 职场文书

《自然之道》教学反思

2014/02/11 职场文书

入股协议书范本

2014/11/01 职场文书

安全检查汇报材料

2014/12/26 职场文书

关于拾金不昧的感谢信

2015/01/21 职场文书

在职证明书模板

2015/06/15 职场文书

2015年统计员个人工作总结

2015/07/23 职场文书

2016重阳节红领巾广播稿

2015/12/18 职场文书

python 离散点图画法的实现

2022/04/01 Python