编程 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学习笔记6 prototype的提出

Jan 11 Javascript

javascript基础之查找元素的详细介绍(访问节点)

Jul 05 Javascript

jquery得到font-size属性值实现代码

Sep 30 Javascript

js实现div弹出层的方法

Nov 20 Javascript

JavaScript获取网页中第一个链接ID的方法

Apr 03 Javascript

Javascript删除指定元素节点的方法

Jun 21 Javascript

AngularJS中使用ngModal模态框实例

May 27 Javascript

详解vue组件通信的三种方式

Jun 30 Javascript

在Vue中使用Compass的方法

Mar 02 Javascript

vue下axios拦截器token刷新机制的实例代码

Jan 17 Javascript

构建一个JavaScript插件系统

Oct 20 Javascript

vue 解决mintui弹窗弹起来,底部页面滚动bug问题

Nov 12 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 计算两个时间戳相隔的时间的函数(小时)

2009/12/18 PHP

PHP 中关于ord($str)&gt;0x80的详细说明

2012/09/23 PHP

详细解读PHP中接口的应用

2015/08/12 PHP

基于jquery ajax 用户无刷新登录方法详解

2012/04/28 Javascript

jQuery判断checkbox是否选中的小例子

2013/12/02 Javascript

jQuery取id有.的值的方法

2014/05/21 Javascript

Lab.js初次使用笔记

2015/02/28 Javascript

Javascript中的arguments与重载介绍

2015/03/15 Javascript

JS获取图片lowsrc属性的方法

2015/04/01 Javascript

js实现兼容性好的微软官网导航下拉菜单效果

2015/09/07 Javascript

AngularJS单选框及多选框实现双向动态绑定

2016/01/13 Javascript

jQuery实现iframe父窗体和子窗体的相互调用

2016/06/17 Javascript

用原生js做单页应用

2017/01/17 Javascript

JS删除数组里的某个元素方法

2018/02/03 Javascript

VUEX-action可以修改state吗

2019/11/19 Javascript

Python Web版语音合成实例详解

2019/07/16 Python

基于django ManyToMany 使用的注意事项详解

2019/08/09 Python

python 使用pygame工具包实现贪吃蛇游戏(多彩版)

2019/10/30 Python

python ubplot使用方法解析

2020/01/10 Python

opencv中图像叠加/图像融合/按位操作的实现

2020/04/01 Python

基于打开pycharm有带图片md文件卡死问题的解决

2020/04/24 Python

解决pyinstaller打包运行程序时出现缺少plotly库问题

2020/06/02 Python

python 检测图片是否有马赛克

2020/12/01 Python

35款精致的 CSS3 和 HTML5 网页模板推荐

2012/08/03 HTML / CSS

HTML5的结构和语义(3):语义性的块级元素

2008/10/17 HTML / CSS

Lookfantastic法国官网：英国知名美妆购物网站

2017/10/28 全球购物

Yahoo-PHP面试题3

2012/01/14 面试题

Linux如何命名文件--使用文件名时应注意

2014/05/29 面试题

2013年高中生自我评价

2013/10/23 职场文书

理货员的岗位职责

2013/11/23 职场文书

公司市场部岗位职责

2013/12/02 职场文书

家长建议怎么写

2014/05/15 职场文书

党员干部廉政承诺书

2015/04/28 职场文书

婚育证明样本

2015/06/16 职场文书

Python中else的三种使用场景

2021/06/16 Python

Mysql排序的特性详情

2021/11/01 MySQL