ASP.NET實現(xiàn)自適應(yīng)圖片大小的彈出窗口(窗口可任意編輯)

2024-07-10 12:56:03

字體：大中小

供稿：網(wǎng)友

在最近的項目中，遇到一個問題，要實現(xiàn)這樣的效果：
      點pic_small.aspx頁面的縮略圖后彈出pic_all.aspx頁面，pic_all.aspx頁面的大小要根據(jù)圖片大小自動調(diào)整，而且要有圖片的說明信息，還可以點上一幅和下一幅等進行翻頁。
      實現(xiàn)過程如下：
      pic_small.aspx頁面縮略圖處的代碼為：
      <img id="imgpic" border=0 height="95" id")%>)" src='<%#"images/product/" + databinder.eval(container.dataitem,"picurl")%>'   width="118" runat="server">

      showwindow保存在openwindows.js文件中，內(nèi)容如下：

function showwindow(id)
{
window.open('pic_all.aspx?id=' + id,'_blank','scrollbars=no');
}

     以下代碼即可實現(xiàn)點縮略圖后彈出頁面pic_all.aspx顯示圖片信息，下面要實現(xiàn)的是pic_all.aspx頁面根據(jù)圖片的大小自動調(diào)整。
     把以下代碼放在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控件，無論你用什么方法，反正就是要從數(shù)據(jù)庫中讀出圖片的名稱或是路徑了。
      obj.offsetwidth 得到的就是顯示出來的原圖的寬了，obj.offsetwidth  + 127表示窗口在圖片的寬度基礎(chǔ)上再大127像素，因為要留一些空間用來實現(xiàn)圖片的說明信息。
      這樣就可以實現(xiàn)彈出來的窗口既可以根據(jù)圖片大小自動調(diào)整，而且又可以隨意編輯彈出來的頁面，因為彈出來的頁面是一個指定頁面，無論要編輯什么，都可以和平時處理頁面一樣處理了。

上一篇：ASP.NET服務(wù)器端異步Web方法

下一篇：.NET平臺下創(chuàng)建動態(tài)Web樹形結(jié)構(gòu)程序設(shè)計