當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > JS實(shí)現(xiàn)圖片的選擇展示

JS實(shí)現(xiàn)圖片的選擇展示

2012/11/8 12:00:16作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱(chēng)】

JS實(shí)現(xiàn)圖片的選擇展示

【實(shí)例描述】

在相冊(cè)、付款或新聞頁(yè)面中經(jīng)常需要用戶進(jìn)行選擇，并在選擇的同時(shí)展示圖片界面以確認(rèn)用戶的選擇。本例學(xué)習(xí)使用下拉框?qū)崿F(xiàn)圖片選擇展示的效果。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>標(biāo)題頁(yè)-學(xué)無(wú)憂（www.wangbatian.cn）</title>
</head>
<body>
<CENTER>
<img width=260 height=200 
src="http://www.baidu.com/img/logo.gif" name="img1">
</CENTER>
<CENTER>
<SELECT onChange="document.img1.src=
options[selectedIndex].value">
<option value="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">
goole搜索</option>
<option value="http://www.baidu.com/img/logo.gif">
百度搜索</option>
<option value="http://search.cn.yimg.com/i/070420/lg.gif">
雅虎搜索</option>
</SELECT>
</CENTER>
</body>
</html>

【運(yùn)行效果】

 圖片的選擇展示運(yùn)行效果

【難點(diǎn)剖析】

本例提供了3個(gè)搜索LOGO的選擇，重點(diǎn)是Select控件的“onchange”事件。當(dāng)用戶選擇下拉框中的數(shù)據(jù)時(shí)，根據(jù)用戶_選擇值的索引“options[selectedIndex]”，用img控件顯用戶選擇的LOGO。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：JS實(shí)現(xiàn)圖片的選擇展示 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： JS實(shí)現(xiàn)  圖片