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


Posted in Javascript onJuly 27, 2006

很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看。

实现此功能的最简单作法是用以下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>即可。

以上代码在IE 5.x-6.0中测试通过。

Javascript 相关文章推荐
读jQuery之八 包装事件对象
Jun 21 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
浅析javascript函数表达式
Feb 10 Javascript
利用JS实现数字增长
Jul 28 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 #Javascript
CSS+JS构建的图片查看器
Jul 22 #Javascript
常用参考资料(手册)下载或者链接
Jul 22 #Javascript
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 #Javascript
用于table内容排序
Jul 21 #Javascript
脚本收藏iframe
Jul 21 #Javascript
document.all还是document.getElementsByName?
Jul 21 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Python中使用中文的方法
2011/02/19 Python
python:socket传输大文件示例
2017/01/18 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python新手学习使用库
2020/06/11 Python
详解Python IO口多路复用
2020/06/17 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
大学军训通讯稿
2014/01/13 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
个人主要事迹材料
2014/08/26 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python