1. 程式人生 > >如何讓彈出視窗自適應圖片的大小

如何讓彈出視窗自適應圖片的大小

解決思路
主要思路是用window.open()方法開啟一個視窗,然後再根據圖片的大小resizeTo()視窗大小,必要時再用moveTo()方法調整視窗位置。現在問題在於如何獲取圖片的大小。

具體步驟
方法一。我們知道,DHTML裡有個Image()物件,只要設定圖片源src後就可以用obj.width和obj.height獲取圖片的寬和高,這兩個資料有了之後就可以給window.open()裡控制視窗大小的引數一個定值了,不過要注意,要把視窗邊框、標題欄高度和圖片距邊界的距離計算在內。
程式碼如下:

<script>
var oImg
function fiximgwin(url,w,h){
 if(arguments.length==1){       //如果影象大小未定義
    oImg=new Image()            //建立影象物件
    oImg.src=url                //設定影象源
    Size(url)                   //呼叫Size函式獲取影象尺寸
 }
//如果已取得影象尺寸,開啟固定大小的視窗
 else window.open(url,"","width="+w+",height="+h)
}
function Size(url){
 if(oImg.width&&oImg.height)       //如果已取得影象尺寸
//將影象尺寸加上一定尺寸後返回給fiximgwin()函式,
//其中18和25的表現見下圖右下角所示
fiximgwin(url,oImg.width+18,oImg.height+25)  
 else setTimeout("Size(url)",10)
}
</script>
<button onClick="fiximgwin(’http://www.flash8.net/upload/2003/9/2/2003922303578757.jpg’)">開啟圖片</button>
 執行效果:


圖1.5.11 自適合圖片大小的視窗

方法二:如果你稍微細心一點,應該會發現,當不指定圖片的大小時,圖片預設顯示原始大小,這時用obj.width和obj.height取到的也是圖片的寬和高的真實值。所以可以先用window.open()方法開啟一個空視窗,再以流方式給視窗寫入呼叫圖片的程式碼,在圖片載入完後有個onload方法,用它觸發resizeTo()改變視窗大小。
程式碼如下: 

<script>
 function fiximgwin(url){
//開啟一個空白視窗,並初始化大小
 var imgwin=window.open(’’,’img’,’width=50,height=50’)
imgwin.focus() //使視窗聚焦,成為當前視窗
//這裡是關鍵程式碼,在圖片載入完後呼叫resizeTo()和
//moveTo()方法調整視窗大小和位置
 var HTML="<html>/r/n<head>/r/n<title>圖片瀏覽</title>/r/n</head>/r/n<body leftmargin=/"0/" topmargin=/"0/">/r/n<img src=/""+url+"/" onload=/"window.resizeTo(this.width+10,this.height+36);window.moveTo((screen.width-this.width)/2,(screen.height-this.height)/2)/">/r/n</body>/r/n</html>"
var doc=imgwin.document
 doc.write(HTML)           //向空白視窗寫入程式碼
 doc.close()                //關閉輸入流,並強制傳送資料顯示。
 }
 </script>
<button onClick="fiximgwin(’http://www.flash8.net/upload/2003/9/2/2003922303578757.jpg’)"> 開啟圖片</button>

 執行效果:


圖1.5.12 自適應圖片大小的視窗
技巧:方法一的程式碼還可以精簡如下:
<script>
function fiximgwin(url){
  var oImg=new Image()   //建立影象物件
  oImg.src=url        //設定影象源
oImg.onload=window.open(url,"","width="+(oImg.width+18)+",height="+(oImg.height+25))
}
</script>
<button onClick="fiximgwin(’http://www.flash8.net/upload/2003/9/2/2003922303578757.jpg’)"> 開啟圖片</button>

特別提示


兩種方法的程式碼執行效果分別如圖1.5.11、1.5.12所示。

特別說明


本例是圖片物件和視窗物件的方法特性應用,對於圖片物件,它有三個主要屬性src、width和height,還有一個onload事件。而對於視窗物件,主要是moveTo方法和resizeTo方法。
moveTo 將視窗左上角的螢幕位置移動到指定的 x 和 y 位置。
resizeTo 將視窗的大小更改為指定的寬度和高度值。