<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    蝸牛的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 會跑的蝸牛 閱讀(909) 評論(1)  編輯  收藏 所屬分類: Javascript

    Feedback

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

    主站蜘蛛池模板: 国产午夜亚洲精品国产成人小说| 亚洲一区影音先锋色资源| 国产v亚洲v天堂无码网站| 亚洲性无码一区二区三区| 无码成A毛片免费| 亚洲午夜日韩高清一区| 久久亚洲精品高潮综合色a片| 久久精品中文字幕免费| 国产精品久久久亚洲| 扒开双腿猛进入爽爽免费视频 | 免费人成年激情视频在线观看| 亚洲一区在线观看视频| 久久国产精品2020免费m3u8 | 今天免费中文字幕视频| 亚洲中文字幕无码爆乳av中文 | 最近免费中文字幕中文高清| 四虎影库久免费视频| 亚洲精品国产摄像头| 免费理论片51人人看电影| 亚洲色图激情文学| 精品少妇人妻AV免费久久洗澡| 中文字幕成人免费高清在线| 亚洲综合在线另类色区奇米| 中国一级特黄高清免费的大片中国一级黄色片 | a级毛片免费高清毛片视频| 亚洲中文字幕乱码熟女在线| 亚洲av无码一区二区三区网站| a级毛片在线免费| 国产成人亚洲综合在线| 亚洲av日韩片在线观看| 青青免费在线视频| 亚洲一区日韩高清中文字幕亚洲| 曰批视频免费30分钟成人| 亚洲国产91在线| 免费一级做a爰片久久毛片潮喷| 5555在线播放免费播放| 亚洲人成网站日本片| 国产最新凸凹视频免费| 久久久久久国产a免费观看不卡| 亚洲精品无码MV在线观看| 91成人在线免费观看|