<!--
google_ad_client = "pub-4490194096475053";
/* 内容页,300x250,第一屏 */
google_ad_slot = "3685991503";
google_ad_width = 300;
google_ad_height = 250;
// -->
如何让弹出窗口自适应图片的大小
解决思路:
主要思路是用window.open()方法打开一个窗口,然后再根据图片的大小resizeTo()窗口大小,必要时再用moveTo()方法调整窗口位置。现在问题在于如何获取图片的大小。
具体步骤:
方法一。我们知道,DHTML里有个Image()对象,只要设置图片源src后就可以用obj.width和obj.height获取图片的宽和高,这两个数据有了之后就可以给window.open()里控制窗口大小的参数一个定值了,不过要注意,要把窗口边框、标题栏高度和图片距边界的距离计算在内。
代码如下:
<script>
var oImg
function fiximgwin(url,w,h){
if(arguments.length==1){ //如果图像大小未定义
oImg=new Image() //创建图像对象
oImg.src=url //设置图像源
Size(url) //调用Size函数获取图像尺寸
}
//如果已取得图像尺寸,打开固定大小的窗口
else window.open(url,"","width="+w+",height="+h)
}
function Size(url){
if(oImg.width&&oImg.height) //如果已取得图像尺寸
//将图像尺寸加上一定尺寸后返回给fiximgwin()函数,
//其中18和25的表现见下图右下角所示
fiximgwin(url,oImg.width+18,oImg.height+25)
else setTimeout("Size(url)",10)
}
</script>
<button onClick="fiximgwin(’http://www.flash8.net/upload/2003/9/2/2003922303578757.jpg’)">打开图片</button>
运行效果:
图1.5.11 自适合图片大小的窗口
方法二:如果你稍微细心一点,应该会发现,当不指定图片的大小时,图片默认显示原始大小,这时用obj.width和obj.height取到的也是图片的宽和高的真实值。所以可以先用window.open()方法打开一个空窗口,再以流方式给窗口写入调用图片的代码,在图片加载完后有个onload方法,用它触发resizeTo()改变窗口大小。
代码如下:
<script>
function fiximgwin(url){
//打开一个空白窗口,并初始化大小
var imgwin=window.open(’’,’img’,’width=50,height=50’)
imgwin.focus() //使窗口聚焦,成为当前窗口
//这里是关键代码,在图片加载完后调用resizeTo()和
//moveTo()方法调整窗口大小和位置
var HTML="<html>\r\n<head>\r\n<title>图片浏览</title>\r\n</head>\r\n<body leftmargin=\"0\" topmargin=\"0\">\r\n<img src=\""+url+"\" onload=\"window.resizeTo(this.width+10,this.height+36);window.moveTo((screen.width-this.width)/2,(screen.height-this.height)/2)\">\r\n</body>\r\n</html>"
var doc=imgwin.document
doc.write(HTML) //向空白窗口写入代码
doc.close() //关闭输入流,并强制发送数据显示。
}
</script>
<button onClick="fiximgwin(’http://www.flash8.net/upload/2003/9/2/2003922303578757.jpg’)"> 打开图片</button>
运行效果:
图1.5.12 自适应图片大小的窗口
技巧:方法一的代码还可以精简如下:
<script>
function fiximgwin(url){
var oImg=new Image() //创建图像对象
oImg.src=url //设置图像源
oImg.onload=window.open(url,"","width="+(oImg.width+18)+",height="+(oImg.height+25))
}
</script>
<button onClick="fiximgwin(’http://www.flash8.net/upload/2003/9/2/2003922303578757.jpg’)"> 打开图片</button>
特别提示
两种方法的代码运行效果分别如图1.5.11、1.5.12所示。
特别说明
本例是图片对象和窗口对象的方法特性应用,对于图片对象,它有三个主要属性src、width和height,还有一个onload事件。而对于窗口对象,主要是moveTo方法和resizeTo方法。
moveTo 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
resizeTo 将窗口的大小更改为指定的宽度和高度值。
http://www.corange.cn/archives/2008/11/2147.html
分享到:
相关推荐
\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.记录上一次关闭窗口时,窗口的位置和大小,并在下一次...
学习Halcon很看了新手必备,根据网上的资料整理学习,希望给正在学习的兄弟们,小走点弯路:功能如下:Hwindow 滚轮缩放 左键实现图片平移,右键适合大小,
javascript主页弹出窗口技巧.html div span layer的区别.html email地址的分割.html ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的图标 .html TEXTAREA自适应文字行数的多少.html title显示...
为你指定的图片打开一个自适应大小的弹出窗口 Sound 类别:Object 文件格式:mxp │ 1,862B 给网页添加背景音乐,可设置循环次数 Average Distribute 类别:Command 文件格式:mxp │ 2,828B 平均分布单元格...
3)修正FireFox浏览器下弹出窗口自适应大小功能不正常的BUG。 4)改进了多文件上传后自动选择添加到上传列表的文件。 5)改进了如找不到对应语言文件则使用默认语言的功能。 2009/05/15 Version 6.0.4 For VS2005/...
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 VS...
zDrawHelp V1.0 ...如:打开图片、缩放、高级、调整窗口大小、永在顶层、不透明度、显示、隐藏、退出。 全局热键—— Ctrl+F11:显示/隐藏切换。 更新历史 ~~~~~~~~ [2011-08-13] V1.0 V1.0发布
1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...
Viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。 媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 ...
18、修复一处隐秘BUG:当使用Ctrl+回车提交表单并弹出对话框时导致弹出新窗口 (因为此时焦点在对话框关闭链接上,这个快捷键让很多浏览器新建窗口) 19、重新绘制'earo'皮肤,修复毛边的问题 20、修复拖动的时候...
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
YodPHP同时支持单入口和多入口模式,...电脑版切换放置在左侧弹出层中;重命名文件只选中文件名部分;加号菜单优化;iOS设备拍照上传自动重命名文件名;iOS对话框含有iframe时滚动条失效问题优化;桌面开始菜单优化。
-一个典型应用,在Window控件中打开新页面,如果传递的参数不正确,则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误!", String.Empty, ExtAspNet.ActiveWindow.GetCloseReference());...
实例179 修改表单属性为弹出窗口 216 实例180 表单输入单元的文字设置 217 实例181 表单输入单元单击删除 218 实例182 表单文本输入的移动选择 219 实例183 通过下拉列表选择头像 220 3.5 CSS+DIV页面布局 222 实例...