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


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 相关文章推荐
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
利用React-router+Webpack快速构建react程序
Oct 27 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
浅谈js中的bind
Mar 18 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
checkbox使用示例
2013/08/23 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
js实现一键复制功能
2017/03/16 Javascript
js断点调试经验分享
2017/12/08 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
如何写出好的Java代码
2014/04/25 面试题
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2015年推普周活动总结
2015/03/27 职场文书
海上钢琴师观后感
2015/06/03 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫