编程 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 处理HTML元素必须避免使用的一种方法

Jul 30 Javascript

Jquery封装tab自动切换效果的具体实现

Jul 13 Javascript

jQuery判断多个input file 都不能为空的例子

Jun 23 Javascript

js实现文字在按钮上滚动的方法

Aug 20 Javascript

全面解析Bootstrap图片轮播效果

Dec 03 Javascript

jquery+css3实现会动的小圆圈效果

Jan 27 Javascript

AngularJS路由切换实现方法分析

Mar 17 Javascript

Linux CentOS系统下安装node.js与express的方法

Apr 01 Javascript

老生常谈combobox和combotree模糊查询

Apr 17 Javascript

jQuery动态追加页面数据以及事件委托详解

May 06 jQuery

vue实现app页面切换动画效果实例

May 23 Javascript

vue-router为激活的路由设置样式操作

Jul 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实现的在线人员函数库

2008/04/09 PHP

php笔记之：php函数range() round()和list()的使用说明

2013/04/26 PHP

分享php分页的功能模块

2015/06/16 PHP

深入理解PHP之源码目录结构与功能说明

2016/06/01 PHP

[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)

2016/07/09 PHP

php导出csv文件,可导出前导0实例代码

2016/11/16 PHP

Laravel如何创建服务器提供者实例代码

2019/04/15 PHP

In Javascript Class, how to call the prototype method.(three method)

2007/01/09 Javascript

定义select的边框颜色

2008/04/28 Javascript

js 跳出页面的frameset框架示例介绍

2013/12/23 Javascript

jquery引用方法时传递参数原理分析

2014/10/13 Javascript

jQuery判断多个input file 都不能为空的例子

2015/06/23 Javascript

JavaScript识别网页关键字并进行描红的方法

2015/11/09 Javascript

Json按某个键的值进行排序

2016/12/22 Javascript

webpack分离css单独打包的方法

2018/06/12 Javascript

使用vue重构资讯页面的实例代码解析

2019/11/26 Javascript

[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场

2014/05/24 DOTA

python实现将元祖转换成数组的方法

2015/05/04 Python

python实现SOM算法

2018/02/23 Python

Python生成器generator用法示例

2018/08/10 Python

python实现点击按钮修改数据的方法

2019/07/17 Python

利用Tensorflow的队列多线程读取数据方式

2020/02/05 Python

appium+python adb常用命令分享

2020/03/06 Python

HTML5 LocalStorage 本地存储刷新值还在

2017/03/10 HTML / CSS

俄罗斯三星品牌商店：Samsungstore

2020/04/05 全球购物

期终自我鉴定

2014/02/17 职场文书

酒店员工检讨书

2014/02/18 职场文书

篝火晚会主持词

2014/03/25 职场文书

网页美工求职信范文

2014/04/17 职场文书

团队激励口号

2014/06/06 职场文书

2014年车间工作总结

2014/11/21 职场文书

本溪关门山导游词

2015/02/09 职场文书

教师个人学习总结

2015/02/11 职场文书

博士生专家推荐信

2015/03/25 职场文书

2015年班组建设工作总结

2015/05/13 职场文书

python3 sqlite3限制条件查询的操作

2021/04/07 Python