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

jQuery 类twitter的文本字数限制带提示效果插件

Apr 16 Javascript

function foo的原型与prototype属性解惑

Nov 19 Javascript

window.onload追加函数使用示例

Mar 03 Javascript

javascript的创建多行字符串的7种方法

Apr 29 Javascript

两种不同的方法实现js对checkbox进行全选和反选

May 13 Javascript

有关json_decode乱码及NULL的问题

Oct 13 Javascript

基于JavaScript实现定时跳转到指定页面

Jan 01 Javascript

详解JS中Array对象扩展与String对象扩展

Jan 07 Javascript

BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

Apr 03 Javascript

WebPack配置vue多页面的技巧

May 15 Javascript

vue开发环境配置跨域的方法步骤

Jan 16 Javascript

vue input输入框关键字筛选检索列表数据展示

Oct 26 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实现多条件查询实例代码

2010/07/17 PHP

PHP5中使用PDO连接数据库的方法

2010/08/01 PHP

PHP中的错误处理、异常处理机制分析

2012/05/07 PHP

Thinkphp中volist标签mod控制一定记录的换行BUG解决方法

2014/11/04 PHP

详解php用static方法的原因

2018/09/12 PHP

php-fpm重启导致的程序执行中断问题详解

2019/04/29 PHP

Js操作Select大全(取值、设置选中等等)

2013/10/29 Javascript

判断iframe里的页面是否加载完成

2014/06/06 Javascript

JavaScript实现twitter puddles算法实例

2014/12/06 Javascript

深入理解javascript作用域第二篇之词法作用域和动态作用域

2016/07/24 Javascript

jquery easyUI中ajax异步校验用户名

2016/08/19 Javascript

详解JavaScript模块化开发

2016/12/04 Javascript

JS实现的数组去除重复数据算法小结

2017/11/17 Javascript

Vuex的actions属性的具体使用

2019/04/14 Javascript

微信小程序与webview交互实现支付功能

2019/06/07 Javascript

javscript 数组扁平化的实现

2020/02/03 Javascript

[20:46]Ti4循环赛第三日VG vs DK

2014/07/12 DOTA

Python中os和shutil模块实用方法集锦

2014/05/13 Python

解决pandas read_csv 读取中文列标题文件报错的问题

2018/06/15 Python

python取数作为临时极大值(极小值)的方法

2018/10/15 Python

python gdal安装与简单使用

2019/08/01 Python

python操作cfg配置文件方式

2019/12/22 Python

Python爬虫爬取电影票房数据及图表展示操作示例

2020/03/27 Python

图解Python中深浅copy（通俗易懂）

2020/09/03 Python

C++和python实现阿姆斯特朗数字查找实例代码

2020/12/07 Python

CSS3实现内凹圆角的实例代码

2017/05/04 HTML / CSS

一篇文章带你学习CSS3图片边框

2020/11/04 HTML / CSS

纽约的奢华内衣店：Journelle

2016/07/29 全球购物

中国专业的综合网上购物商城：京东

2016/08/02 全球购物

捷克多品牌在线时尚商店：ANSWEAR.cz

2020/10/03 全球购物

杭州时比特电子有限公司SQL

2013/08/22 面试题

C#笔试题和英文面试题

2013/02/07 面试题

日期和时间问题

2015/01/04 面试题

行政管理毕业生自荐信

2014/02/24 职场文书

公务员群众路线心得体会

2014/11/03 职场文书

2014年大班保育员工作总结

2014/12/02 职场文书