自適應圖片大小的彈出窗口
很多時候我們需要提供這樣的功能給訪問者：當訪問者點擊頁面中的縮略圖時，其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。
實現(xiàn)此功能的最簡單作法是用以下HTML代碼創(chuàng)建一個圖像鏈接：
其中標記的href屬性指定全尺寸圖片的URL，target屬性設置為_blank指定在新窗口中顯示該圖片；標記的src屬性指定縮略圖的URL。 如果我們想對顯示全尺寸圖片的窗口的外觀進行某些控制（比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時），則可調用 window.open 方法，該方法接收三個參數(shù)，分別指定要打開文件的URL，窗口名及窗口特性，在窗口特性參數(shù)中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個沒有工具欄、地址欄、狀態(tài)欄、菜單欄，寬、高分別為400、350的窗口中：
這里提出了個問題，如果所有全尺寸圖片都具有統(tǒng)一的大�。ū热缍际�400x350），那么以上代碼適用于所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）。但如果全尺寸圖片的大小并不統(tǒng)一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然后在window.open方法的窗口特性參數(shù)中一一設置height和width為正確的值，在圖片數(shù)量較多的情況下，這顯然效率太低了。那么是否有一勞永逸的方法，即讓彈出窗口能自動適應要顯示圖片的大��？通過研究，發(fā)現(xiàn)可以使用 DHTML 中的 Image 對象來達到我們的目的，Image 對象可動態(tài)裝載指定的圖片，通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小，以此來設置彈出窗口的大小，即可實現(xiàn)自適應圖片大小的彈出窗口了。下面即是實現(xiàn)代碼:
以下為引用的內容：
使用時將上面的代碼放在網(wǎng)頁文檔的標記對中，然后在鏈接的點擊事件中調用OpenFullSizeWindow函數(shù)，如即可。
以上代碼在IE 5.x－6.0中測試通過
- TEL：131 7970 3111
-
慧網(wǎng)微信
- 掃描二維碼
- 關注邳州在線
-
手機網(wǎng)站
- 手機掃描二維碼
- 進入手機站
網(wǎng)站地圖
付款方式