点击图片弹出固定或自适应窗口
生活随笔
收集整理的這篇文章主要介紹了
点击图片弹出固定或自适应窗口
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<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中測試通過。
? 其中<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中測試通過。
轉載于:https://www.cnblogs.com/tiwlin/archive/2009/10/28/1591219.html
總結
以上是生活随笔為你收集整理的点击图片弹出固定或自适应窗口的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iPhone如何使用粗字体？
- 下一篇： 离职后祝福同事的话语 祝离职同事前程似锦