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

刷新时清空文本框内容的js代码

Apr 23 Javascript

jQuery实现鼠标滑过遮罩并高亮显示效果

Jul 16 Javascript

玩转方法:call和apply

May 08 Javascript

javascript的日期对象、数组对象、二维数组使用说明

Dec 22 Javascript

Javascript控制input输入时间格式的方法

Jan 28 Javascript

JavaScript基础知识之方法汇总结

Jan 24 Javascript

jQuery on()方法绑定动态元素的点击事件实例代码浅析

Jun 16 Javascript

jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】

Sep 12 jQuery

es6新特性之 class 基本用法解析

May 05 Javascript

Vue批量图片显示时遇到的路径被解析问题

Mar 28 Javascript

JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式

Jul 10 Javascript

javascript实现抢购倒计时程序

Aug 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

Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存

2015/02/10 PHP

PHP版QQ互联OAuth示例代码分享

2015/07/05 PHP

详解WordPress中添加友情链接的方法

2016/05/21 PHP

php实现多维数组排序的方法示例

2017/03/23 PHP

Laravel学习教程之View模块详解

2017/09/18 PHP

单独使用CKFinder选择图片的方法

2010/08/21 Javascript

js的onload事件及初始化按钮事件示例代码

2013/09/25 Javascript

Jquery AJAX POST与GET之间的区别

2013/11/14 Javascript

js中arguments的用法(实例讲解)

2013/11/30 Javascript

js中function()使用方法

2013/12/24 Javascript

jQuery实现的多选框多级联动插件

2014/05/02 Javascript

JavaScript中的Math.LN2属性用法详解

2015/06/12 Javascript

Jqgrid之强大的表格插件应用

2015/12/02 Javascript

学习JavaScript设计模式之单例模式

2016/01/19 Javascript

jquery ajax分页插件的简单实现

2016/01/27 Javascript

ES6的新特性概览

2016/03/10 Javascript

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

2017/01/22 Javascript

详解a++和++a的区别

2017/08/30 Javascript

JavaScript实现QQ列表展开收缩扩展功能

2017/10/30 Javascript

微信小程序3D轮播实现代码

2019/09/19 Javascript

Nodejs封装类似express框架的路由实例详解

2020/01/05 NodeJs

JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)

2020/05/27 Javascript

原生js实现放大镜组件

2021/01/22 Javascript

[02:23]1个至宝=115个英雄特效最“绿”至宝拉比克“魔导师密钥”登场

2018/12/29 DOTA

Python编程中time模块的一些关键用法解析

2016/01/19 Python

Python的Scrapy爬虫框架简单学习笔记

2016/01/20 Python

Python简单实现子网掩码转换的方法

2016/04/13 Python

解决pycharm界面不能显示中文的问题

2018/05/23 Python

python调用外部程序的实操步骤

2019/03/04 Python

基于TensorBoard中graph模块图结构分析

2020/02/15 Python

详解python程序中的多任务

2020/09/16 Python

Python使用Turtle模块绘制国旗的方法示例

2021/02/28 Python

New Balance波兰官方商城：始于1906年，百年慢跑品牌

2017/08/15 全球购物

Joseph官网：英国小众奢侈品牌

2019/05/17 全球购物

年终工作总结范文2014

2014/11/27 职场文书

MySQL面试题讲解之如何设置Hash索引

2021/11/01 MySQL