js實現Select頭像選擇實時預覽代碼
更新時間：2015年08月17日 17:59:17 作者：企鵝
這篇文章主要介紹了js實現Select頭像選擇實時預覽代碼,涉及javascript動態(tài)遍歷及設置select選項的技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了js實現Select頭像選擇實時預覽代碼。分享給大家供大家參考。具體如下：
這里演示js實現Select頭像選擇，實時預覽效果，在留言或評論的時候，讓用戶簡易的選擇頭像，以前最常見的方式是使用單選框，當然使用其它的形式也可以，比如今天這個Select，下拉選框選擇頭像，也是不錯的體驗。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/
具體代碼如下：
<!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判斷圖片加載完成后獲取圖片實際寬高的方法,涉及JavaScript圖片加載及屬性操作相關技巧,需要的朋友可以參考下2016-02-02
js命名應遵循簡潔、語義化的原則,下面這篇文章主要給大家介紹了關于JavaScript命名約定的最佳實踐指南,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03![JavaScript使用技巧精萃[代碼非常實用]](http://img.jbzj.com/images/xgimg/bcimg2.png)
為方便大家查找不做分頁設置ctrl+F即可2008-11-11
可以通過瀏覽器在訪問者的硬盤上創(chuàng)建文件 JavaScript操作文件系統創(chuàng)建快捷方式2009-07-07
"事件機制可以使程序邏輯更加符合現實世界，在JavaScript 中很多對象都有自己的事件，例如按鈕就有onclick 事件，下拉列表框就有onchange 事件，通過這些事件可以方便編程。2009-08-08
js canvas實現適用于移動端的百分比儀表盤dashboard
這篇文章主要為大家詳細介紹了js canvas實現適用于移動端的百分比儀表盤dashboard，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript實現twitter puddles算法實例
這篇文章主要介紹了JavaScript實現twitter puddles算法實例,本文源自twitter的一道面試題,本文使用js解開了這首題,需要的朋友可以參考下2014-12-12
Javascript 解疑，需要的朋友可以參考下。2009-11-11
本文介紹了如何使用pdfmake第三方庫在項目中根據模板生成PDF文件,文中還提到了常用的配置,如頁眉和頁腳效果,對pdfmake pdf使用方法感興趣的朋友一起看看吧2024-09-09
這篇文章主要為大家展示了bootstrap多種樣式進度條，默認進度條、條紋進度條等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12