编程 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互斥锁分享

Feb 02 Javascript

jquery通过closest选择器修改上级元素的方法

Mar 17 Javascript

Javascript实现div的toggle效果实例分析

Jun 09 Javascript

BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法

Jun 07 Javascript

AngularJS基础 ng-csp 指令详解

Aug 01 Javascript

Bootstrap基本组件学习笔记之导航(10)

Dec 07 Javascript

js简单实现网页换肤功能

Apr 07 Javascript

addEventListener()与removeEventListener()解析

Apr 20 Javascript

详解vue+webpack+express中间件接口使用

Jul 17 Javascript

微信小程序文章详情页面实现代码

Sep 10 Javascript

小程序兼容安卓和IOS数据处理问题及坑

Sep 18 Javascript

详解微信小程序图片地扯转base64解决方案

Aug 18 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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值，并将指针移到下一位

2011/10/31 PHP

php fsockopen中多线程问题的解决办法[翻译]

2011/11/09 PHP

zf框架的session会话周期及次数限制使用示例

2014/03/13 PHP

PHP file_get_contents函数读取远程数据超时的解决方法

2015/05/13 PHP

PHP foreach遍历多维数组实现方式

2016/11/16 PHP

PHP读取并输出XML文件数据的简单实现方法

2017/12/22 PHP

基于jQuery的星级评分插件

2011/08/12 Javascript

jQuery 借助插件Lavalamp实现导航条动态美化效果

2013/09/27 Javascript

易操作的jQuery表单提示插件

2015/12/01 Javascript

IScroll5 中文API参数说明和调用方法

2016/05/21 Javascript

Node.js配合node-http-proxy解决本地开发ajax跨域问题

2016/08/31 Javascript

Mint-UI时间组件起始时间问题及时间插件使用

2018/08/20 Javascript

微信小程序 wxParse插件显示视频问题

2019/09/27 Javascript

JavaScript进阶（三）闭包原理与用法详解

2020/05/09 Javascript

JavaScript判断数据类型有几种方法及区别介绍

2020/09/02 Javascript

python实现定时同步本机与北京时间的方法

2015/03/24 Python

使用 Python 实现微信群友统计器的思路详解

2018/09/26 Python

Python3的介绍、安装和命令行的认识(推荐)

2018/10/20 Python

python 把列表转化为字符串的方法

2018/10/23 Python

python 寻找离散序列极值点的方法

2019/07/10 Python

pandas DataFrame创建方法的方式

2019/08/02 Python

OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现

2019/11/25 Python

Python3压缩和解压缩实现代码

2021/03/01 Python

canvas之万花筒效果的简单实现(推荐)

2016/08/16 HTML / CSS

深入解析HTML5 Canvas控制图形矩阵变换的方法

2016/03/24 HTML / CSS

StubHub美国：购买或出售您的门票

2019/07/09 全球购物

顺丰快递Java软件工程师面试题

2015/07/31 面试题

电子商务专业个人的自我评价

2013/11/19 职场文书

初中体育教学反思

2014/01/14 职场文书

班级元旦晚会开幕词

2015/01/29 职场文书

入党积极分子党支部意见

2015/06/02 职场文书

申请吧主发表的感言

2015/08/03 职场文书

利用python进行数据加载

2021/06/20 Python

Springboot集成阿里云OSS上传文件系统教程

2021/06/28 Java/Android

JS前端轻量fabric.js系列之画布初始化

2022/08/05 Javascript