自适应图片大小的弹出窗口(3 中方法)
生活随笔
收集整理的這篇文章主要介紹了
自适应图片大小的弹出窗口(3 中方法)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方法一 在最近的項目中，遇到一個問題，要實現這樣的效果：
??????點pic_small.Aspx頁面的縮略圖后彈出pic_all.aspx頁面，pic_all.aspx頁面的大小要根據圖片大小自動調整，而且要有圖片的說明信息，還可以點上一幅和下一幅等進行翻頁。
??????實現過程如下：
??????pic_small.Aspx頁面縮略圖處的代碼為：
??????<IMG?id="imgPic"?style="CURSOR:?hand"??border=0?height="95"?onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)"?src='<%#"Images/Product/"?+?DataBinder.Eval(Container.DataItem,"PicUrl")%>'???width="118"?runat="server">
??????ShowWindow保存在OpenWindows.js文件中，內容如下：
function?ShowWindow(id)
{
??window.open('pic_all.aspx?ID='?+?id,'_blank','Scrollbars=no');
}
?
?????以下代碼即可實現點縮略圖后彈出頁面pic_all.aspx顯示圖片信息，下面要實現的是pic_all.aspx頁面根據圖片的大小自動調整。
?????把以下代碼放在pic_all.aspx頁面的<Head></Head>之間：
<script>
??function?window.onload()
??{
???var?obj=document.getElementById("PicUrl");
???window.resizeTo(obj.offsetWidth?+?127,obj.offsetHeight?+?75);
??}
??</script>
??????這里的PicUrl是頁面pic_all.aspx中用來顯示原圖大小的，我用的是html控件，無論你用什么方法，反正就是要從數據庫中讀出圖片的名稱或是路徑了。
??????obj.offsetWidth?得到的就是顯示出來的原圖的寬了，obj.offsetWidth??+?127表示窗口在圖片的寬度基礎上再大127像素，因為要留一些空間用來實現圖片的說明信息。
??????這樣就可以實現彈出來的窗口既可以根據圖片大小自動調整，而且又可以隨意編輯彈出來的頁面，因為彈出來的頁面是一個指定頁面，無論要編輯什么，都可以和平時處理頁面一樣處理了。??
方法二 當我提供給瀏覽者多張圖片時，往往是先提供一組縮略圖，當訪問者點擊頁面中的縮略圖時，其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。如何做出為種效果呢？肯定是用彈出窗口！由于有時圖片不是一樣大，在彈出圖片窗口時可能出現空白，影響效果。若一個窗口一個窗口按圖片大小作調整，實大太麻煩了。本文提供的這種彈出窗口，可以使你一勞永益，它會根據圖片的在小自動調整窗口的大小。請看下面的制作方法：
1、?先用以下HTML代碼創建一個圖像的空鏈接：?本例縮略圖放在images目錄下，文件名為img0003s.jpg；原圖也放在images目錄下，文件名為img0003.jpg，創建好的空鏈接代碼如下：
?<a?href="#"?><img?src="images/img0003s.jpg"></a>?
?其中<a>標記的href屬性指定為“#”即為空鏈接；<img>標記的src屬性指定縮略圖的URL。?
2、在網頁代碼<head>與</head>之間加上如下的代碼：
<script>?
function?newimg(imgurl)?{?
newwin=window.open('about:blank','','width=10,height=10');?//先新打開一個小窗口
newwin.document.write('<body?leftmargin=0?topmargin=0><img?id=img1?src='+imgurl+'?onload="self.resizeTo(this.offsetWidth,this.offsetHeight);">');?//把窗口的大小調整到與圖片一樣大。
}?
</script>
3、在縮略圖空鏈接的代碼中加上οnclick="newimg('在這里寫上原圖的Ulr')"，最后的縮略圖空鏈接代碼如下：
<a?href="#"?onclick="newimg('images/img0003.jpg')"><img?src="images/img0003s.jpg"></a>?
到此已ＯＫ了，若有多張圖片，重復上述１～３步就行了。
本方法的原理是利用空鏈接彈出一個小窗口，把圖片加入，然后讓窗口根據圖片的大小來調整窗口的在小。
方法三 很多時候我們需要提供這樣的功能給訪問者：當訪問者點擊頁面中的縮略圖時，其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。
實現此功能的最簡單作法是用以下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>即可。
本文轉自高海東博客園博客，原文鏈接：http://www.cnblogs.com/ghd258/archive/2006/02/28/339438.html，如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的自适应图片大小的弹出窗口(3 中方法)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《数学与泛型编程：高效编程的奥秘》一1.
- 下一篇： redis-cluster集群单机搭建