|
2008-05-25
自適應(yīng)圖片大小的彈出窗口很多時(shí)候我們需要提供這樣的功能給訪(fǎng)問(wèn)者：當(dāng)訪(fǎng)問(wèn)者點(diǎn)擊頁(yè)面中的縮略圖時(shí)，其對(duì)應(yīng)的全尺寸圖片將顯示在一個(gè)新的彈出窗口中供訪(fǎng)問(wèn)者查看。
實(shí)現(xiàn)此功能的最簡(jiǎn)單作法是用以下HTML代碼創(chuàng)建一個(gè)圖像鏈接： Html代碼
<a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a> 其中<a>標(biāo)記的href屬性指定全尺寸圖片的URL，target屬性設(shè)置為_(kāi)blank指定在新窗口中顯示該圖片；<img>標(biāo)記的src屬性指定縮略圖的URL。 如果我們想對(duì)顯示全尺寸圖片的窗口的外觀(guān)進(jìn)行某些控制（比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時(shí)），則可調(diào)用 window.open 方法，該方法接收三個(gè)參數(shù)，分別指定要打開(kāi)文件的URL，窗口名及窗口特性，在窗口特性參數(shù)中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個(gè)沒(méi)有工具欄、地址欄、狀態(tài)欄、菜單欄，寬、高分別為400、350的窗口中： Html代碼
<a href="fullsize.jpg" onClick="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"><img src="small.jpg"></a> 這里就提出了個(gè)問(wèn)題，如果所有全尺寸圖片都具有統(tǒng)一的大小（比如都是400x350），那么以上代碼適用于所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）。但如果全尺寸圖片的大小并不統(tǒng)一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然后在window.open方法的窗口特性參數(shù)中一一設(shè)置height和width為正確的值，在圖片數(shù)量較多的情況下，這顯然效率太低了。那么是否有一勞永逸的方法，即讓彈出窗口能自動(dòng)適應(yīng)要顯示圖片的大??？通過(guò)研究，發(fā)現(xiàn)可以使用 DHTML 中的 Image 對(duì)象來(lái)達(dá)到我們的目的，Image 對(duì)象可動(dòng)態(tài)裝載指定的圖片，通過(guò)讀取其 width 和 height 屬性即能獲得裝入圖片的大小，以此來(lái)設(shè)置彈出窗口的大小，即可實(shí)現(xiàn)自適應(yīng)圖片大小的彈出窗口了。下面即是實(shí)現(xiàn)代碼: Js代碼
<script language="JavaScript" type="text/JavaScript">
<!--
var imgObj;
function checkImg(theURL,winName){
// 對(duì)象是否已創(chuàng)建
if (typeof(imgObj) == "object"){
// 是否已取得了圖像的高度和寬度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根據(jù)取得的圖像高度和寬度設(shè)置彈出窗口的高度與寬度，并打開(kāi)該窗口
// 其中的增量 20 和 30 是設(shè)置的窗口邊框與圖片間的間隔量
OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
else
// 因?yàn)橥ㄟ^(guò) Image 對(duì)象動(dòng)態(tài)裝載圖片，不可能立即得到圖片的寬度和高度，所以每隔100毫秒重復(fù)調(diào)用檢查
setTimeout("checkImg('" + theURL + "','" + winName + "')", 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 彈出窗口外觀(guān)參數(shù)
sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
// 調(diào)用是否來(lái)自 checkImg
if (features == null || features == ""){
// 創(chuàng)建圖像對(duì)象
imgObj = new Image();
// 設(shè)置圖像源
imgObj.src = theURL;
// 開(kāi)始獲取圖像大小
checkImg(theURL, winName)
}
else{
// 打開(kāi)窗口
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦窗口
aNewWin.focus();
}
}
//-->
</script>
使用時(shí)將上面的代碼放在網(wǎng)頁(yè)文檔的<head></head>標(biāo)記對(duì)中，然后在鏈接的點(diǎn)擊事件中調(diào)用 OpenFullSizeWindow函數(shù)，如 Html代碼
|
|
|
來(lái)自： 晶晶suky > 《我的圖書(shū)館》
