很多时候我们需要提供这样的功能给访问者：当访问者点击页面中的缩略图时，其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。
实现此功能的最简单作法是用以下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>即可。
详细出处参考：http://www.jb51.net/article/435.htm
分享到：
相关推荐
### ASP.NET实现自适应图片大小的弹出窗口详解 在Web开发中，处理图像展示时，经常需要创建一个能够自适应图像大小的弹出窗口，同时保持良好的用户体验。本文将详细解析如何在ASP.NET框架下实现这一功能，具体包括...
iPop Demo iPop Demo This is a demo of the image popup script. I know you want to see it in action. Testing things with a small image. The popups have been setup with the AutoApply extension which...
5. **响应式设计(responsive design)**：考虑到不同设备的屏幕尺寸，弹出窗口应具有响应式，能够自适应地调整大小和位置。这可以通过媒体查询(`media queries`)来实现，确保在手机、平板电脑和桌面电脑上都有良好的...
标题中的“拥有阴影并能自适应的弹出层”指的是在网页设计中，创建一个具有阴影效果且能够根据页面尺寸动态调整大小的弹出对话框或模态窗口的技术。这样的弹出层通常用于显示警告、确认信息或者进行表单填写等交互...
在响应式设计中，我们可以定义不同断点，当浏览器窗口大小改变时，应用相应的样式规则，使图片和布局能够自适应。 2. **响应式图像元素（Responsive Images）**： HTML5引入了`<picture>`元素和`srcset`与`sizes`...
"自适应大小的层"是一种设计策略，其目标是实现弹出层（也称为模态窗口或对话框）的效果，能够根据内容自动调整尺寸，以适应不同的显示需求。这样的功能尤其重要，因为它确保了在不同屏幕尺寸和分辨率的设备上都能...
PowerBuilder作为一种面向对象的开发语言，提供了多种窗口类型，包括主窗口(MainWindow)、弹出式窗口(PopupWindow)、子窗口(ChildWindow)、响应窗口(ResponseWindow)、MDI框架窗口(MDIFrame)和带微帮助的MDI框架窗口...
弹出窗口的实现通常涉及到CSS（层叠样式表）和HTML结构。CSS用于定义窗口的外观，包括位置、大小、颜色、透明度等属性。例如，我们可以创建一个隐藏的div作为弹窗容器，初始设置display为none，然后在点击事件触发时...
当用户点击触发元素（如图片或按钮）时，`ThickBox`会将指定的内容（如图片、网页或者视频）嵌入到这个弹出窗口中。它支持多种类型的媒体，包括图片、HTML页面、IFrame、Flash以及YouTube视频等。 二、核心功能 1....
在现代的移动设备和网页设计中，自适应屏幕方向和大小已经成为必不可少的考虑因素。随着智能手机和平板电脑的广泛使用，用户可能在不同尺寸和方向的屏幕上浏览内容，因此开发者必须确保他们的应用或网站能够在各种...
jQuery Litebox是一款强大的灯箱插件，主要用于在网页中实现优雅的弹出窗口效果，将图片、视频、iframe等内容以模态窗口的形式展示给用户。它具有多种功能和自适应特性，可以无缝地与网页内容集成，提升用户体验。在...
4. **自适应大小**：自适应大小是指弹出层能够根据图片的尺寸或窗口大小自动调整，确保内容始终能在屏幕上清晰可见。这涉及到响应式设计，利用CSS的媒体查询（media queries）和百分比单位来实现。 5. **切换功能**...
3. 自适应图片：图片大小和分辨率对加载速度有很大影响。在响应式设计中，我们可以使用srcset属性来提供不同尺寸的图片，浏览器会根据设备的分辨率选择合适的图片。此外，懒加载（Lazy Loading）技术也可以延迟非...
宽度自适应是指网页元素的宽度会根据浏览器窗口的大小自动调整。这通常通过CSS的`width`属性配合百分比单位来实现。例如，设置`div`的宽度为`width: 100%;`，这样`div`就会占据其父元素的全部宽度，当窗口大小改变时...
"点击图片放大功能"则是指当用户点击页面中的图片时，图片会以全屏或弹出窗口的形式显示，提供更清晰、更细致的查看体验。这种功能在很多网站的图片展示中非常常见，能够帮助用户更好地欣赏或查看细节。 关于标签...
它强调通过灵活的布局、媒体查询和弹性图片等技术，使网页能够根据浏览器窗口大小的变化而变化。 2. **流式布局（Fluid Grids）**：流式布局是一种基于百分比的布局方式，而不是固定像素。这样可以使页面元素随着...
综上所述，"html5全屏网格响应式布局点击弹出窗口切换特效"是一个涵盖了前端开发多个领域的主题，包括HTML5的新特性、响应式设计、CSS3布局技术以及动态交互设计。学习并掌握这些技术，将有助于构建更具现代感和用户...
Flexbox为容器中的子元素提供了灵活的布局方式，特别是在处理不确定或可变的尺寸时，比如图片大小不一的情况。通过设置`display: flex`，我们可以使图片容器变为一个弹性容器，并使用`flex-wrap`属性控制是否允许子...
1. **响应式布局（Responsive Layout）**：这是自适应网站设计的基础，采用百分比而非固定像素来定义元素的宽度，使得网页能够根据浏览器窗口大小的变化自动调整布局。常见的响应式布局技术包括流式布局、网格系统和...
"手机网页自适应手机版"这一主题旨在探讨如何使网页在不同设备上，特别是手机触屏上，能够呈现出良好的用户体验和视觉效果。下面将详细阐述相关知识点。 1. **响应式设计（Responsive Web Design）**：响应式设计是...