js實現(xiàn)Select頭像選擇實時預(yù)覽代碼
本文實例講述了js實現(xiàn)Select頭像選擇實時預(yù)覽代碼。分享給大家供大家參考。具體如下:
這里演示js實現(xiàn)Select頭像選擇,實時預(yù)覽效果,在留言或評論的時候,讓用戶簡易的選擇頭像,以前最常見的方式是使用單選框,當然使用其它的形式也可以,比如今天這個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程序設(shè)計有所幫助。
相關(guān)文章
DOM節(jié)點的替換或修改函數(shù)replaceChild()用法實例
這篇文章主要介紹了DOM節(jié)點的替換或修改函數(shù)replaceChild()用法,實例分析了replaceChild()替換DOM節(jié)點的使用技巧,需要的朋友可以參考下2015-01-01單行 JS 實現(xiàn)移動端金錢格式的輸入規(guī)則
這篇文章主要介紹了單行 JS 實現(xiàn)移動端金錢格式的輸入規(guī)則,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-05-05javascript的tab切換原理與效果實現(xiàn)方法
這篇文章主要介紹了javascript的tab切換原理與效果實現(xiàn)方法,實例分析了簡單的tab切換實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01一個JavaScript處理textarea中的字符成每一行實例
這篇文章主要與大家分享一個JavaScript處理textarea中的字符成每一行實例,很簡單,但很實用,大家可以看看2014-09-09