快捷導(dǎo)航

asp.net 點(diǎn)縮略圖彈出隨圖片大小自動(dòng)調(diào)整的頁(yè)面

更新時(shí)間：2009年06月05日 23:30:52 作者：

程序用asp.net編寫(xiě)，功能主要是，點(diǎn)pic_small.Aspx頁(yè)面的縮略圖后彈出pic_all.aspx頁(yè)面，pic_all.aspx頁(yè)面的大小要根據(jù)圖片大小自動(dòng)調(diào)整

而且要有圖片的說(shuō)明信息，還可以點(diǎn)上一幅和下一幅等進(jìn)行翻頁(yè)。
實(shí)現(xiàn)過(guò)程如下：
pic_small.Aspx頁(yè)面縮略圖處的代碼為：

復(fù)制代碼代碼如下:

<IMGid="imgPic"style="CURSOR:hand"border=0height="95"onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)"src='<%#"Images/Product/"+DataBinder.Eval(Container.DataItem,"PicUrl")%>'width="118"runat="server"> 
ShowWindow保存在OpenWindows.js文件中，內(nèi)容如下： 
functionShowWindow(id) 
{ 
window.open('pic_all.aspx?ID='+id,'_blank','Scrollbars=no'); 
} 

以下代碼即可實(shí)現(xiàn)點(diǎn)縮略圖后彈出頁(yè)面pic_all.aspx顯示圖片信息，下面要實(shí)現(xiàn)的是pic_all.aspx頁(yè)面根據(jù)圖片的大小自動(dòng)調(diào)整。
把以下代碼放在pic_all.aspx頁(yè)面的<Head></Head>之間：

復(fù)制代碼代碼如下:

<script> 
functionwindow.onload() 
{ 
varobj=document.getElementById("PicUrl"); 
window.resizeTo(obj.offsetWidth+127,obj.offsetHeight+75); 
} 
</script> 

這里的PicUrl是頁(yè)面pic_all.aspx中用來(lái)顯示原圖大小的，我用的是html控件，無(wú)論你用什么方法，反正就是要從數(shù)據(jù)庫(kù)中讀出圖片的名稱或是路徑了。
obj.offsetWidth得到的就是顯示出來(lái)的原圖的寬了，obj.offsetWidth+127表示窗口在圖片的寬度基礎(chǔ)上再大127像素，因?yàn)橐粢恍┛臻g用來(lái)實(shí)現(xiàn)圖片的說(shuō)明信息。
這樣就可以實(shí)現(xiàn)彈出來(lái)的窗口既可以根據(jù)圖片大小自動(dòng)調(diào)整，而且又可以隨意編輯彈出來(lái)的頁(yè)面，因?yàn)閺棾鰜?lái)的頁(yè)面是一個(gè)指定頁(yè)面，無(wú)論要編輯什么，都可以和平時(shí)處理頁(yè)面一樣處理了。

您可能感興趣的文章:

相關(guān)文章

xpath的數(shù)據(jù)和節(jié)點(diǎn)類型以及XPath中節(jié)點(diǎn)匹配的基本方法
xpath的數(shù)據(jù)和節(jié)點(diǎn)類型以及XPath中節(jié)點(diǎn)匹配的基本方法,學(xué)習(xí)xpath的朋友可以參考下。
2010-09-09
WebAPI 實(shí)現(xiàn)前后端分離的示例
下面小編就為大家分享一篇WebAPI 實(shí)現(xiàn)前后端分離的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
.Net?Core授權(quán)認(rèn)證方案JWT(JSON?Web?Token)初探
這篇文章介紹了.Net?Core授權(quán)認(rèn)證方案JWT，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
asp.net點(diǎn)選驗(yàn)證碼實(shí)現(xiàn)思路分享 (附demo)
這篇文章主要介紹了asp.net點(diǎn)選驗(yàn)證碼實(shí)現(xiàn)思路分享 (附demo),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-01-01
jquery.pagination +JSON 動(dòng)態(tài)無(wú)刷新分頁(yè)實(shí)現(xiàn)代碼
jquery.pagination +JSON 動(dòng)態(tài)無(wú)刷新分頁(yè)實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2011-12-12
asp.net 獲取TreeView中第一個(gè)選中的節(jié)點(diǎn)
今天做的項(xiàng)目中有一個(gè)要獲取TreeView中第一個(gè)選中的節(jié)點(diǎn)，當(dāng)然子節(jié)點(diǎn)己包含checkbox以前做過(guò)，用的時(shí)候又不知道怎么做了，花了點(diǎn)時(shí)間又寫(xiě)了一下，記錄下來(lái)，以備下次用.
2010-03-03
ASP.NET入門之HTML服務(wù)器控件概述
這篇文章主要介紹了ASP.NET入門之HTML服務(wù)器控件,對(duì)于初學(xué)者來(lái)說(shuō)很有借鑒學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2014-07-07
Asp.net MVC中使用JQuery插件ajaxFileUpload上傳文件
這篇文章主要介紹了Asp.net MVC中使用JQuery插件ajaxFileUpload上傳文件,需要的朋友可以參考下
2016-08-08
asp.net 使用js分頁(yè)實(shí)現(xiàn)異步加載數(shù)據(jù)
這篇文章主要介紹了asp.net使用js分頁(yè)實(shí)現(xiàn)異步加載數(shù)據(jù),需要的朋友可以參考下
2014-04-04
asp.net實(shí)現(xiàn)取消頁(yè)面表單內(nèi)文本輸入框Enter響應(yīng)的方法
這篇文章主要介紹了asp.net實(shí)現(xiàn)取消頁(yè)面表單內(nèi)文本輸入框Enter響應(yīng)的方法,結(jié)合實(shí)例形式分析了asp.net文本框Enter響應(yīng)的原理與取消Enter響應(yīng)的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11