自适应图片大小的弹出窗口(3 中方法)-阿里云开发者社区

开发者社区> 老朱教授> 正文

自适应图片大小的弹出窗口(3 中方法)

简介:
+关注继续查看

方法一
None.gif在最近的项目中,遇到一个问题,要实现这样的效果:
None.gif      点pic_small.Aspx页面的缩略图后弹出pic_all.aspx页面,pic_all.aspx页面的大小要根据图片大小自动调整,而且要有图片的说明信息,还可以点上一幅和下一幅等进行翻页。
None.gif      实现过程如下:
None.gif      pic_small.Aspx页面缩略图处的代码为:
ExpandedBlockStart.gif      
<IMG id="imgPic" style="CURSOR: hand"  border=0 height="95" onclick="ShowWindow(<%#DataBinder.Eval(Container.DataItem,"ID")%>)" src='<%#"Images/Product/" + DataBinder.Eval(Container.DataItem,"PicUrl")%>'   width="118" runat="server">
None.gif
None.gif      ShowWindow保存在OpenWindows.js文件中,内容如下:
None.gif
None.giffunction ShowWindow(id)
None.gif{
None.gif  window.open('pic_all.aspx?ID=' + id,'_blank','Scrollbars=no');
None.gif}
None.gif 
None.gif     以下代码即可实现点缩略图后弹出页面pic_all.aspx显示图片信息,下面要实现的是pic_all.aspx页面根据图片的大小自动调整。
None.gif     把以下代码放在pic_all.aspx页面的
<Head></Head>之间:
None.gif
ExpandedBlockStart.gif
<script>
InBlock.gif  
function window.onload()
ExpandedSubBlockStart.gif  
{
InBlock.gif   
var obj=document.getElementById("PicUrl");
InBlock.gif   window.resizeTo(obj.offsetWidth 
+ 127,obj.offsetHeight + 75);
ExpandedSubBlockEnd.gif  }

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

方法二
None.gif当我提供给浏览者多张图片时,往往是先提供一组缩略图,当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。如何做出为种效果呢?肯定是用弹出窗口!由于有时图片不是一样大,在弹出图片窗口时可能出现空白,影响效果。若一个窗口一个窗口按图片大小作调整,实大太麻烦了。本文提供的这种弹出窗口,可以使你一劳永益,它会根据图片的在小自动调整窗口的大小。请看下面的制作方法:
None.gif
None.gif  1、 先用以下HTML代码创建一个图像的空链接: 本例缩略图放在images目录下,文件名为img0003s.jpg;原图也放在images目录下,文件名为img0003.jpg,创建好的空链接代码如下:
None.gif   
<href="#" ><img src="images/img0003s.jpg"></a> 
None.gif   其中
<a>标记的href属性指定为“#”即为空链接;<img>标记的src属性指定缩略图的URL。 
None.gif
None.gif  2、在网页代码
<head></head>之间加上如下的代码:
None.gif
ExpandedBlockStart.gif
<script> 
ExpandedSubBlockStart.gif
function newimg(imgurl) 
InBlock.gifnewwin
=window.open('about:blank','','width=10,height=10'); //先新打开一个小窗口
InBlock.gif
newwin.document.write('<body leftmargin=0 topmargin=0><img id=img1 src='+imgurl+' onload="self.resizeTo(this.offsetWidth,this.offsetHeight);">'); //把窗口的大小调整到与图片一样大。
ExpandedBlockEnd.gif
}
 
None.gif
</script>
None.gif
None.gif  3、在缩略图空链接的代码中加上onclick="newimg('在这里写上原图的Ulr')",最后的缩略图空链接代码如下:
None.gif
None.gif
<href="#" onclick="newimg('images/img0003.jpg')"><img src="images/img0003s.jpg"></a> 
None.gif
None.gif  到此已OK了,若有多张图片,重复上述1~3步就行了。
None.gif
None.gif  本方法的原理是利用空链接弹出一个小窗口,把图片加入,然后让窗口根据图片的大小来调整窗口的在小。
None.gif
None.gif

方法三
None.gif很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。
None.gif
None.gif  实现此功能的最简单作法是用以下HTML代码创建一个图像链接:
None.gif  
<href="fullsize.jpg" target="_blank"><img src="small.jpg"></a> 
None.gif  其中
<a>标记的href属性指定全尺寸图片的URL,target属性设置为_blank指定在新窗口中显示该图片;<img>标记的src属性指定缩略图的URL。
None.gif
None.gif  如果我们想对显示全尺寸图片的窗口的外观进行某些控制(比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时),则可调用 window.open 方法,该方法接收三个参数,分别指定要打开文件的URL,窗口名及窗口特性,在窗口特性参数中可指定窗口的高度、宽度,是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏,宽、高分别为400、350的窗口中:
None.gif
<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>
None.gif
None.gif  这里就提出了个问题,如果所有全尺寸图片都具有统一的大小(比如都是400x350),那么以上代码适用于所有的缩略图片链接(只是href属性指向的全尺寸图片文件不同)。但如果全尺寸图片的大小并不统一,还用以上代码则我们需要先取得每幅全尺寸图片的大小,然后在window.open方法的窗口特性参数中一一设置height和width为正确的值,在图片数量较多的情况下,这显然效率太低了。那么是否有一劳永逸的方法,即让弹出窗口能自动适应要显示图片的大小?通过研究,发现可以使用 DHTML 中的 Image 对象来达到我们的目的,Image 对象可动态装载指定的图片,通过读取其 width 和 height 属性即能获得装入图片的大小,以此来设置弹出窗口的大小,即可实现自适应图片大小的弹出窗口了。下面即是实现代码:
None.gif
ExpandedBlockStart.gif
<script language="javascript" type="text/javascript">
InBlock.gif
<!--
InBlock.gif
var imgObj;
ExpandedSubBlockStart.gif
function checkImg(theURL,winName){
InBlock.gif  
// 对象是否已创建
ExpandedSubBlockStart.gif
  if (typeof(imgObj) == "object"){
InBlock.gif    
// 是否已取得了图像的高度和宽度
InBlock.gif
    if ((imgObj.width != 0&& (imgObj.height != 0))
InBlock.gif      
// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度,并打开该窗口
InBlock.gif
      // 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量
InBlock.gif
      OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20+ ",height=" + (imgObj.height+30));
InBlock.gif    
else
InBlock.gif      
// 因为通过 Image 对象动态装载图片,不可能立即得到图片的宽度和高度,所以每隔100毫秒重复调用检查
InBlock.gif
      setTimeout("checkImg('" + theURL + "','" + winName + "')"100)
ExpandedSubBlockEnd.gif  }

ExpandedSubBlockEnd.gif}

InBlock.gif
ExpandedSubBlockStart.gif
function OpenFullSizeWindow(theURL,winName,features) {
InBlock.gif  
var aNewWin, sBaseCmd;
InBlock.gif  
// 弹出窗口外观参数
InBlock.gif
  sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
InBlock.gif  
// 调用是否来自 checkImg 
ExpandedSubBlockStart.gif
  if (features == null || features == ""){
InBlock.gif    
// 创建图像对象
InBlock.gif
    imgObj = new Image();
InBlock.gif    
// 设置图像源
InBlock.gif
    imgObj.src = theURL;
InBlock.gif    
// 开始获取图像大小
InBlock.gif
    checkImg(theURL, winName)
ExpandedSubBlockEnd.gif  }

ExpandedSubBlockStart.gif  
else{
InBlock.gif    
// 打开窗口
InBlock.gif
    aNewWin = window.open(theURL,winName, sBaseCmd + features);
InBlock.gif    
// 聚焦窗口
InBlock.gif
    aNewWin.focus();
ExpandedSubBlockEnd.gif  }

ExpandedSubBlockEnd.gif}

ExpandedBlockEnd.gif
//-->
None.gif
</script>
None.gif
None.gif  使用时将上面的代码放在网页文档的
<head></head>标记对中,然后在链接的点击事件中调用OpenFullSizeWindow函数,如<href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。
None.gif
None.gif



本文转自高海东博客园博客,原文链接:http://www.cnblogs.com/ghd258/archive/2006/02/28/339438.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7751 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9424 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5456 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
3829 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16817 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3227 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1131 0
+关注
3404
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载