蝸牛的JAVA外殼

          ┎Running Snail┒ ┖ -------------- ┚

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            13 Posts :: 0 Stories :: 10 Comments :: 0 Trackbacks
          很多時候我們需要提供這樣的功能給訪問者:當訪問者點擊頁面中的縮略圖時,其對應的全尺寸圖片將顯示在一個新的彈出窗口中供訪問者查看。

          實現此功能的最簡單作法是用以下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>即可。
          以上代碼在IE 5.x-6.0中測試通過。
          posted on 2007-11-06 21:34 會跑的蝸牛 閱讀(910) 評論(1)  編輯  收藏 所屬分類: Javascript

          Feedback

          # re: 讓彈出窗口的大小隨圖片變化而變化 2014-04-19 13:53 wew
          撒大聲地  回復  更多評論
            

          主站蜘蛛池模板: 刚察县| 南雄市| 万源市| 盐山县| 大渡口区| 黄骅市| 故城县| 文登市| 南澳县| 高州市| 商河县| 福安市| 凤阳县| 青浦区| 玉龙| 光山县| 桐庐县| 平罗县| 乐山市| 西贡区| 柞水县| 鄂托克旗| 温宿县| 藁城市| 饶河县| 博兴县| 定日县| 鄂托克旗| 宿迁市| 三明市| 岳西县| 即墨市| 临江市| 玉山县| 穆棱市| 锡林浩特市| 恩施市| 黄石市| 文成县| 磴口县| 霍城县|