很多時候我們需要提供這樣的功能給訪問者當訪問者點擊頁面中的縮略圖時其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看
實現此功能的最簡單作法是用以下HTML代碼創建一個圖像鏈接
<a target=_blank><img src=smalljpg></a>
其中<a>標記的href屬性指定全尺寸圖片的URLtarget屬性設置為_blank指定在新窗口中顯示該圖片<img>標記的src屬性指定縮略圖的URL
如果我們想對顯示全尺寸圖片的窗口的外觀進行某些控制（比如希望彈出窗口的高度寬度能與全尺寸圖片的大小匹配時）則可調用 windowopen 方法該方法接收三個參數分別指定要打開文件的URL窗口名及窗口特性在窗口特性參數中可指定窗口的高度寬度是否顯示菜單欄工具欄等以下代碼將顯示全尺寸圖片在一個沒有工具欄地址欄狀態欄菜單欄寬高分別為的窗口中
<a onClick=windowopen(thishref height=width=toolbar=nolocation=nostatus=nomenubar=no);return false><img src=smalljpg></a>
這裡就提出了個問題如果所有全尺寸圖片都具有統一的大小（比如都是x）那麼以上代碼適用於所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）但如果全尺寸圖片的大小並不統一還用以上代碼則我們需要先取得每幅全尺寸圖片的大小然後在windowopen方法的窗口特性參數中一一設置height和width為正確的值在圖片數量較多的情況下這顯然效率太低了那麼是否有一勞永逸的方法即讓彈出窗口能自動適應要顯示圖片的大小？通過研究發現可以使用 DHTML 中的 Image 對象來達到我們的目的Image 對象可動態裝載指定的圖片通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小以此來設置彈出窗口的大小即可實現自適應圖片大小的彈出窗口了下面即是實現代碼:
<script language=JavaScript type=text/JavaScript>
<!
var imgObj;
function checkImg(theURLwinName){
// 對象是否已創建
if (typeof(imgObj) == object){
// 是否已取得了圖像的高度和寬度
if ((imgObjwidth != ) && (imgObjheight != ))
// 根據取得的圖像高度和寬度設置彈出窗口的高度與寬度並打開該窗口
// 其中的增量 和 是設置的窗口邊框與圖片間的間隔量
OpenFullSizeWindow(theURLwinName width= + (imgObjwidth+) + height= + (imgObjheight+));
else
// 因為通過 Image 對象動態裝載圖片不可能立即得到圖片的寬度和高度所以每隔毫秒重復調用檢查
setTimeout(checkImg( + theURL + + winName + ) )
}
}
function OpenFullSizeWindow(theURLwinNamefeatures) {
var aNewWin sBaseCmd;
// 彈出窗口外觀參數
sBaseCmd = toolbar=nolocation=nostatus=nomenubar=noscrollbars=noresizable=no;
// 調用是否來自 checkImg
if (features == null || features == ){
// 創建圖像對象
imgObj = new Image();
// 設置圖像源
imgObjsrc = theURL;
// 開始獲取圖像大小
checkImg(theURL winName)
}
else{
// 打開窗口
aNewWin = windowopen(theURLwinName sBaseCmd + features);
// 聚焦窗口
aNewWinfocus();
}
}
//>
</script>
使用時將上面的代碼放在網頁文檔的<head></head>標記對中然後在鏈接的點擊事件中調用OpenFullSizeWindow函數如<a onClick=OpenFullSizeWindow(thishref);return false><img src=smalljpg></a>即可
以上代碼在IE x－中測試通過
From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25347.html
