自適應圖片大小的彈出窗口
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
很多時候我們需要提供這樣的功能給訪問者：當訪問者點擊頁面中的縮略圖時，其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。
實現此功能的最簡單作法是用以下HTML代碼創建一個圖像鏈接： <a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a> 其中<a>標記的href屬性指定全尺寸圖片的URL，target屬性設置為_blank指定在新窗口中顯示該圖片；<img>標記的src屬性指定縮略圖的URL。 如果我們想對顯示全尺寸圖片的窗口的外觀進行某些控制（比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時），則可調用 window.open 方法，該方法接收三個參數，分別指定要打開文件的URL，窗口名及窗口特性，在窗口特性參數中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個沒有工具欄、地址欄、狀態欄、菜單欄，寬、高分別為400、350的窗口中： <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> 這里就提出了個問題，如果所有全尺寸圖片都具有統一的大小（比如都是400x350），那么以上代碼適用于所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）。但如果全尺寸圖片的大小并不統一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然后在window.open方法的窗口特性參數中一一設置height和width為正確的值，在圖片數量較多的情況下，這顯然效率太低了。那么是否有一勞永逸的方法，即讓彈出窗口能自動適應要顯示圖片的大小？通過研究，發現可以使用 DHTML 中的 Image 對象來達到我們的目的，Image 對象可動態裝載指定的圖片，通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小，以此來設置彈出窗口的大小，即可實現自適應圖片大小的彈出窗口了。下面即是實現代碼: <script language="javascript" type="text/javascript"> <!-- var imgObj; function checkImg(theURL,winName){ // 對象是否已創建 if (typeof(imgObj) == "object"){ // 是否已取得了圖像的高度和寬度 if ((imgObj.width != 0) && (imgObj.height != 0)) // 根據取得的圖像高度和寬度設置彈出窗口的高度與寬度，并打開該窗口 // 其中的增量 20 和 30 是設置的窗口邊框與圖片間的間隔量 OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30)); else // 因為通過 Image 對象動態裝載圖片，不可能立即得到圖片的寬度和高度，所以每隔100毫秒重復調用檢查 setTimeout("checkImg('" + theURL + "','" + winName + "')", 100) } } function OpenFullSizeWindow(theURL,winName,features) { var aNewWin, sBaseCmd; // 彈出窗口外觀參數 sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,"; // 調用是否來自 checkImg if (features == null || features == ""){ // 創建圖像對象 imgObj = new Image(); // 設置圖像源 imgObj.src = theURL; // 開始獲取圖像大小 checkImg(theURL, winName) } else{ // 打開窗口 aNewWin = window.open(theURL,winName, sBaseCmd + features); // 聚焦窗口 aNewWin.focus(); } } //--> </script> 使用時將上面的代碼放在網頁文檔的<head></head>標記對中，然后在鏈接的點擊事件中調用OpenFullSizeWindow函數，如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。 以上代碼在IE 5.x－6.0中測試通過。 該文章在 2011/3/11 23:22:25 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
