点击图片弹出固定或自适应窗口
生活随笔
收集整理的這篇文章主要介紹了
点击图片弹出固定或自适应窗口
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<a ? href="fullsize.jpg" ? target="_blank"><img ? src="small.jpg"></a> ? ?
? 其中<a>標(biāo)記的href屬性指定全尺寸圖片的URL，target屬性設(shè)置為_blank指定在新窗口中顯示該圖片；<img>標(biāo)記的src屬性指定縮略圖的URL。 ?
? ?
? 如果我們想對顯示全尺寸圖片的窗口的外觀進(jìn)行某些控制（比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時），則可調(diào)用 ? window.open ? 方法，該方法接收三個參數(shù)，分別指定要打開文件的URL，窗口名及窗口特性，在窗口特性參數(shù)中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個沒有工具欄、地址欄、狀態(tài)欄、菜單欄，寬、高分別為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> ?
? ?
? 這里就提出了個問題，如果所有全尺寸圖片都具有統(tǒng)一的大小（比如都是400x350），那么以上代碼適用于所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）。但如果全尺寸圖片的大小并不統(tǒng)一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然后在window.open方法的窗口特性參數(shù)中一一設(shè)置height和width為正確的值，在圖片數(shù)量較多的情況下，這顯然效率太低了。那么是否有一勞永逸的方法，即讓彈出窗口能自動適應(yīng)要顯示圖片的大小？通過研究，發(fā)現(xiàn)可以使用 ? DHTML ? 中的 ? Image ? 對象來達(dá)到我們的目的，Image ? 對象可動態(tài)裝載指定的圖片，通過讀取其 ? width ? 和 ? height ? 屬性即能獲得裝入圖片的大小，以此來設(shè)置彈出窗口的大小，即可實現(xiàn)自適應(yīng)圖片大小的彈出窗口了。下面即是實現(xiàn)代碼: ?
? <script ? language="JavaScript" ? type="text/JavaScript"> ?
? <!-- ?
? var ? imgObj; ?
? function ? checkImg(theURL,winName){ ?
? // ? 對象是否已創(chuàng)建 ?
? if ? (typeof(imgObj) ? == ? "object"){ ?
? // ? 是否已取得了圖像的高度和寬度 ?
? if ? ((imgObj.width ? != ? 0) ? && ? (imgObj.height ? != ? 0)) ?
? // ? 根據(jù)取得的圖像高度和寬度設(shè)置彈出窗口的高度與寬度，并打開該窗口 ?
? // ? 其中的增量 ? 20 ? 和 ? 30 ? 是設(shè)置的窗口邊框與圖片間的間隔量 ?
? OpenFullSizeWindow(theURL,winName, ? ",width=" ? + ? (imgObj.width+20) ? + ? ",height=" ? + ? (imgObj.height+30)); ?
? else ?
? // ? 因為通過 ? Image ? 對象動態(tài)裝載圖片，不可能立即得到圖片的寬度和高度，所以每隔100毫秒重復(fù)調(diào)用檢查 ?
? setTimeout("checkImg('" ? + ? theURL ? + ? "','" ? + ? winName ? + ? "')", ? 100) ?
? } ?
? } ?
? ?
? function ? OpenFullSizeWindow(theURL,winName,features) ? { ?
? var ? aNewWin, ? sBaseCmd; ?
? // ? 彈出窗口外觀參數(shù) ?
? sBaseCmd ? = ? "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,"; ?
? // ? 調(diào)用是否來自 ? checkImg ? ?
? if ? (features ? == ? null ? || ? features ? == ? ""){ ?
? // ? 創(chuàng)建圖像對象 ?
? imgObj ? = ? new ? Image(); ?
? // ? 設(shè)置圖像源 ?
? imgObj.src ? = ? theURL; ?
? // ? 開始獲取圖像大小 ?
? checkImg(theURL, ? winName) ?
? } ?
? else{ ?
? // ? 打開窗口 ?
? aNewWin ? = ? window.open(theURL,winName, ? sBaseCmd ? + ? features); ?
? // ? 聚焦窗口 ?
? aNewWin.focus(); ?
? } ?
? } ?
? //--> ?
? </script> ?
? ?
? 使用時將上面的代碼放在網(wǎng)頁文檔的<head></head>標(biāo)記對中，然后在鏈接的點擊事件中調(diào)用OpenFullSizeWindow函數(shù)，如<a ? href="fullsize.jpg" ? onClick="OpenFullSizeWindow(this.href,'','');return ? false"><img ? src="small.jpg"></a>即可。 ?
? 以上代碼在IE ? 5.x－6.0中測試通過。
? 其中<a>標(biāo)記的href屬性指定全尺寸圖片的URL，target屬性設(shè)置為_blank指定在新窗口中顯示該圖片；<img>標(biāo)記的src屬性指定縮略圖的URL。 ?
? ?
? 如果我們想對顯示全尺寸圖片的窗口的外觀進(jìn)行某些控制（比如希望彈出窗口的高度、寬度能與全尺寸圖片的大小匹配時），則可調(diào)用 ? window.open ? 方法，該方法接收三個參數(shù)，分別指定要打開文件的URL，窗口名及窗口特性，在窗口特性參數(shù)中可指定窗口的高度、寬度，是否顯示菜單欄、工具欄等。以下代碼將顯示全尺寸圖片在一個沒有工具欄、地址欄、狀態(tài)欄、菜單欄，寬、高分別為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> ?
? ?
? 這里就提出了個問題，如果所有全尺寸圖片都具有統(tǒng)一的大小（比如都是400x350），那么以上代碼適用于所有的縮略圖片鏈接（只是href屬性指向的全尺寸圖片文件不同）。但如果全尺寸圖片的大小并不統(tǒng)一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然后在window.open方法的窗口特性參數(shù)中一一設(shè)置height和width為正確的值，在圖片數(shù)量較多的情況下，這顯然效率太低了。那么是否有一勞永逸的方法，即讓彈出窗口能自動適應(yīng)要顯示圖片的大小？通過研究，發(fā)現(xiàn)可以使用 ? DHTML ? 中的 ? Image ? 對象來達(dá)到我們的目的，Image ? 對象可動態(tài)裝載指定的圖片，通過讀取其 ? width ? 和 ? height ? 屬性即能獲得裝入圖片的大小，以此來設(shè)置彈出窗口的大小，即可實現(xiàn)自適應(yīng)圖片大小的彈出窗口了。下面即是實現(xiàn)代碼: ?
? <script ? language="JavaScript" ? type="text/JavaScript"> ?
? <!-- ?
? var ? imgObj; ?
? function ? checkImg(theURL,winName){ ?
? // ? 對象是否已創(chuàng)建 ?
? if ? (typeof(imgObj) ? == ? "object"){ ?
? // ? 是否已取得了圖像的高度和寬度 ?
? if ? ((imgObj.width ? != ? 0) ? && ? (imgObj.height ? != ? 0)) ?
? // ? 根據(jù)取得的圖像高度和寬度設(shè)置彈出窗口的高度與寬度，并打開該窗口 ?
? // ? 其中的增量 ? 20 ? 和 ? 30 ? 是設(shè)置的窗口邊框與圖片間的間隔量 ?
? OpenFullSizeWindow(theURL,winName, ? ",width=" ? + ? (imgObj.width+20) ? + ? ",height=" ? + ? (imgObj.height+30)); ?
? else ?
? // ? 因為通過 ? Image ? 對象動態(tài)裝載圖片，不可能立即得到圖片的寬度和高度，所以每隔100毫秒重復(fù)調(diào)用檢查 ?
? setTimeout("checkImg('" ? + ? theURL ? + ? "','" ? + ? winName ? + ? "')", ? 100) ?
? } ?
? } ?
? ?
? function ? OpenFullSizeWindow(theURL,winName,features) ? { ?
? var ? aNewWin, ? sBaseCmd; ?
? // ? 彈出窗口外觀參數(shù) ?
? sBaseCmd ? = ? "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,"; ?
? // ? 調(diào)用是否來自 ? checkImg ? ?
? if ? (features ? == ? null ? || ? features ? == ? ""){ ?
? // ? 創(chuàng)建圖像對象 ?
? imgObj ? = ? new ? Image(); ?
? // ? 設(shè)置圖像源 ?
? imgObj.src ? = ? theURL; ?
? // ? 開始獲取圖像大小 ?
? checkImg(theURL, ? winName) ?
? } ?
? else{ ?
? // ? 打開窗口 ?
? aNewWin ? = ? window.open(theURL,winName, ? sBaseCmd ? + ? features); ?
? // ? 聚焦窗口 ?
? aNewWin.focus(); ?
? } ?
? } ?
? //--> ?
? </script> ?
? ?
? 使用時將上面的代碼放在網(wǎng)頁文檔的<head></head>標(biāo)記對中，然后在鏈接的點擊事件中調(diào)用OpenFullSizeWindow函數(shù)，如<a ? href="fullsize.jpg" ? onClick="OpenFullSizeWindow(this.href,'','');return ? false"><img ? src="small.jpg"></a>即可。 ?
? 以上代碼在IE ? 5.x－6.0中測試通過。
轉(zhuǎn)載于:https://www.cnblogs.com/tiwlin/archive/2009/10/28/1591219.html
總結(jié)
以上是生活随笔為你收集整理的点击图片弹出固定或自适应窗口的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iPhone如何使用粗字体？
- 下一篇： FileUpload路径