很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。
实现此功能的最简单作法是用以下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>即可。
分享到:
相关推荐
\ASP.NET实现自适应图片大小的弹出窗口(窗口可任意编辑).doc
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...
运行脚本后在弹出窗口中选择需要导入的图片即可。 注意:如果图片很多且质量大建议导入完毕后立即保存(脚本里有保存提示的操作但已屏蔽,可根据需要进行修改),Excel会对图片进行优化进而提高文档响应速度。
3.右击可弹出菜单栏,菜单包括:适应宽度,适应窗口,原图大小,截图保存 4.实现幻灯片播放,可设置幻灯片间隔时间 5.左右方向键或者A和D键控制前后图片切换 6.记录上一次关闭窗口时,窗口的位置和大小,并在下一次...
为你指定的图片打开一个自适应大小的弹出窗口 Sound 类别:Object 文件格式:mxp │ 1,862B 给网页添加背景音乐,可设置循环次数 Average Distribute 类别:Command 文件格式:mxp │ 2,828B 平均分布单元格...
学习Halcon很看了新手必备,根据网上的资料整理学习,希望给正在学习的兄弟们,小走点弯路:功能如下:Hwindow 滚轮缩放 左键实现图片平移,右键适合大小,
javascript主页弹出窗口技巧.html div span layer的区别.html email地址的分割.html ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的图标 .html TEXTAREA自适应文字行数的多少.html title显示...
12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期...
12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期...
FastStone Image Viewer的创新功能为直观的以全屏幕模式查看和浏览图片时可以同时显示并快速存取EXIF信息,当鼠标指向屏幕四角时会快速弹出图片的各种属性及图像处理应用。另外FastStone Image Viewer 支持无损JPEG...
3)修正FireFox浏览器下弹出窗口自适应大小功能不正常的BUG。 4)改进了多文件上传后自动选择添加到上传列表的文件。 5)改进了如找不到对应语言文件则使用默认语言的功能。 2009/05/15 Version 6.0.4 For VS2005/...
zDrawHelp V1.0 ...如:打开图片、缩放、高级、调整窗口大小、永在顶层、不透明度、显示、隐藏、退出。 全局热键—— Ctrl+F11:显示/隐藏切换。 更新历史 ~~~~~~~~ [2011-08-13] V1.0 V1.0发布
3)修正FireFox浏览器下弹出窗口自适应大小功能不正常的BUG。 4)改进了多文件上传后自动选择添加到上传列表的文件。 5)改进了如找不到对应语言文件则使用默认语言的功能。 2009/05/15 Version 6.0.4 For VS...
1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...
Viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。 媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 ...
18、修复一处隐秘BUG:当使用Ctrl+回车提交表单并弹出对话框时导致弹出新窗口 (因为此时焦点在对话框关闭链接上,这个快捷键让很多浏览器新建窗口) 19、重新绘制'earo'皮肤,修复毛边的问题 20、修复拖动的时候...
YodPHP同时支持单入口和多入口模式,...电脑版切换放置在左侧弹出层中;重命名文件只选中文件名部分;加号菜单优化;iOS设备拍照上传自动重命名文件名;iOS对话框含有iframe时滚动条失效问题优化;桌面开始菜单优化。
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元的文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入的移动选择 219 实例183 通过下拉列表选择头像 220 3.5 CSS+DIV页面布局 222 实例...