ASP.NET实现自适应图片大小的弹窗 窗口可任意编辑

在最近的项目中,遇到一个问题,要实现这样的效果:

点pic_small.Aspx页面的缩略图后弹出pic_all.aspx页面,pic_all.aspx页面的大小要根据图片大小自动调整,而且要有图片的说明信息,还可以点上一幅和下一幅等进行翻页。
实现过程如下:

pic_small.Aspx页面缩略图处的代码为:

<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文件中,内容如下:

functionShowWindow(id)
{
window.open('pic_all.aspx?ID='+id,'_blank','Scrollbars=no');
}

以下代码即可实现点缩略图后弹出页面pic_all.aspx显示图片信息,下面要实现的是pic_all.aspx页面根据图片的大小自动调整。
把以下代码放在pic_all.aspx页面的<Head></Head>之间:

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

这里的PicUrl是页面pic_all.aspx中用来显示原图大小的,我用的是html控件,无论你用什么方法,反正就是要从数据库中读出图片的名称或是路径了。
obj.offsetWidth得到的就是显示出来的原图的宽了,obj.offsetWidth+127表示窗口在图片的宽度基础上再大127像素,因为要留一些空间用来实现图片的说明信息。
这样就可以实现弹出来的窗口既可以根据图片大小自动调整,而且又可以随意编辑弹出来的页面,因为弹出来的页面是一个指定页面,无论要编辑什么,都可以和平时处理页面一样处理了。

时间: 2024-12-08 05:01:15

ASP.NET实现自适应图片大小的弹窗 窗口可任意编辑的相关文章

ASP.NET实现自适应图片大小的弹出窗口(窗口可任意编辑)

asp.net|弹出窗口|自适应 在最近的项目中,遇到一个问题,要实现这样的效果:      点pic_small.Aspx页面的缩略图后弹出pic_all.aspx页面,pic_all.aspx页面的大小要根据图片大小自动调整,而且要有图片的说明信息,还可以点上一幅和下一幅等进行翻页.      实现过程如下:      pic_small.Aspx页面缩略图处的代码为:      <IMG id="imgPic" style="CURSOR: hand" 

自适应图片大小的弹出窗口

弹出窗口|自适应 很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看. 实现此功能的最简单作法是用以下HTML代码创建一个图像链接: <a href="http://www.webjx.com/htmldata/2005-02-25/fullsize.jpg" target="_blank"><img src="http://www.webjx.com/htmld

asp,php,js获取图片大小并控制

asp,php,js获取图片大小并控制 本文章讲了二种获取图片的大小,第一种是php ,第二种是js 第三种是asp的,js 获取图片大小然后再用js 改变图片大小,下面我们有例子说明. php相当简单的,用getimagesize 函数就行了,我们只要对得到的数组进行处理就行了. <? $arr=getimagesize("images/album_01.gif"); echo $arr[3]; $strarr=explode("\"",$arr[

自适应图片大小的弹出窗口_图象特效

很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看. 实现此功能的最简单作法是用以下HTML代码创建一个图像链接: <a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a>  其中<a>标记的href属性指定全尺寸图片的URL,target属性设置为_b

如何获取设置图片大小以适应大小在页面上显示

显示|页面 大家知道,丰富多彩的Web页面离不开图片的支持,图像一方面增加了网页的生动性,另一方面增加了网页规模,使下载速度减慢.如何让一图片能以适当大小在页面上显示,成了我一时解不开的谜. 前不久,我为单位开发了一个教学科研网站,采用新闻管理系统,首页上新闻栏目中,需要从数据库中调用图片文件作为图片新闻中的图片,从而形成文字绕排形式.由于整个系统包括新闻上传.新闻编辑.系统公告等都是动态实现的.在开发的过程中,我考虑到以下几个因素:(1)作为网站的维护者,对计算机的操作不太熟练:(2)网站讲究

如何获取设置图片大小

大家知道,丰富多彩的Web页面离不开图片的支持,图像一方面增加了网页的生动性,另一方面增加了网页规模,使下载速度减慢.如何让一图片能以适当大小在页面上显示,成了我一时解不开的谜. 前不久,我为单位开发了一个教学科研网站,采用新闻管理系统,首页上新闻栏目中,需要从数据库中调用图片文件作为图片新闻中的图片,从而形成文字绕排形式.由于整个系统包括新闻上传.新闻编辑.系统公告等都是动态实现的.在开发的过程中,我考虑到以下几个因素:(1)作为网站的维护者,对计算机的操作不太熟练:(2)网站讲究布局合理,内

如何在Word2007中任意调整图片大小

  Word2007提供了丰富的图片编辑功能,方便用户在不借助Photoshop等图片处理工具的情况下,直接在Word文档中对图片进行编辑.修改,甚至还可以为图片添加倒映.三维效果等.下面就来学习如何在Word2007中任意调整图片大小 . 为了满足编辑需要,插入图片后,通常还需要对图片的大小进行调整. (1)快速调整图片大小选中插入的图片,图片边缘会出现一线框,如图1所示,拖曳线框可以凋整图片的大小.当鼠标指针变成双向箭头时,拖曳鼠标可以让图片保持长宽比(原比例)进行调整. (2)精确调整图片

CSS控制图片自适应Div大小

  CSS让图片自适应Div大小,对宽度执行CSS的expression指令,这个指令会在客户端被执行,当用户最大化显示窗口或缩放窗口时控制图片按比例适应Div宽度的大小.以下来看完整的示例代码如下:   浏览器窗口最大化后可看到图片自适应的效果,请替换IMG标签中的图片地址为一个有效的图片地址,以便查看效果.

html5-手机网页中,图片按钮自适应屏幕大小沉底

问题描述 手机网页中,图片按钮自适应屏幕大小沉底 HTML5做手机网页,现在需要将一排4个按钮沉底,网页已经自适应屏幕大小宽和高都100%, 为什么我用百分比设置的时候,要达到百分之一百多,在苹果5,6,6P模式下都蛮好, 到苹果4就不行.有什么快速方便的解决办法 解决方案 手机网页屏幕自适应获取手机屏幕大小和图片自动适应大小