如何让弹出窗口自适应图片的大小
解决思路:
主要思路是用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+"/" οnlοad=/"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.οnlοad=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 将窗口的大小更改为指定的宽度和高度值。
-
用JQUERY做的弹出窗口如何随着窗口大小而改变,又如何隐藏弹出层的“关闭”安钮
2014-07-29 10:02:58请教个问题,用JQUERY做的弹出窗口,目前弹出窗是全屏展示, [code="java"] _testWindow.window({ title: "弹出窗口", content:$('#afile').html(),//本页 width: 1010, height: 600, closed: false, ... -
如何让弹出窗口自适应图片的大小
2009-12-15 13:31:00解决思路: 主要思路是用window.open()方法打开一个窗口,然后再根据图片的大小resizeTo()窗口大小,必要时再用moveTo()方法调整窗口位置。现在问题在于如何获取图片的大小。具体步骤: 方法一。我们知道,DHTML里有...解决思路:
主要思路是用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+"/" οnlοad=/"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.οnlοad=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 将窗口的大小更改为指定的宽度和高度值。 -
HTML 如何弹出新窗口
2014-12-26 19:25:33学习此文档,可以快速了解。如何在html文档中 设置弹出窗口的大小 -
弹出窗口自适应图片的大小
2019-09-25 00:17:53如何让弹出窗口自适应图片的大小 解决思路: 主要思路是用window.open()方法打开一个窗口,然后再根据图片的大小resizeTo()窗口大小,必要时再用moveTo()方法调整窗口位置。现在问题在于如何获取图片的大小。 具体...转载于:https://www.cnblogs.com/ajuanabc/archive/2009/07/24/2463090.html
-
22、Axure如何设置弹出框(详细步骤)
2019-05-16 11:06:55背景:在使用Axure时...在双击state1,当你看到的虚线框就是弹出窗口的大小 4、在弹出框中加入相应的元件 5、回到page主界面,这时候的弹出框是显示出来的。 6、选中动态面板,右键“设为隐藏” 7...背景:在使用Axure时经常会用到弹出框,为了防止这些遗忘就做个笔记。
1、打开Axure,在空白页面增加一个button
2、再加入一个动态面板
3、双击动态面板
在双击state1,当你看到的虚线框就是弹出窗口的大小
4、在弹出框中加入相应的元件
5、回到page主界面,这时候的弹出框是显示出来的。
6、选中动态面板,右键“设为隐藏”
7、选中按钮->属性->鼠标单击时
8、点击元件->显示/隐藏->显示,在配置动作时勾选动态面板
9、按下F5 进入到预览界面
点击按钮后的效果
-
android弹出activity设置大小的方法
2021-01-06 01:06:18如何设置Activity的大小,让你的窗口看起来不再是全屏的。有些网友可能知道通过主题比如Theme.Dialog来实现,不过告诉大家设置Activity不再全屏显示的原理。Android Theme也主要是通过定义Style来实现的,实现的原理... -
Java 中如何控制弹出窗口的关闭,类似于QQ的天气的弹窗
2013-09-19 07:29:39// 设置窗口大小 this.setSize(380, 292); //窗口初始位置设为中间 this.setLocationRelativeTo(null); } private GridBagConstraints local(int x, int y) { GridBagConstraints gbc = ... -
android弹出activity设置大小
2013-05-09 09:01:17如何设置Activity的大小,让你的窗口看起来不再是全屏的。有些网友可能知道通过主题比如Theme.Dialog来实现,不过告诉大家设置Activity不再全屏显示的原理。Android Theme也主要是通过定义Style来实现的,实现的原理...如何设置Activity的大小,让你的窗口看起来不再是全屏的。有些网友可能知道通过主题比如Theme.Dialog来实现,不过告诉大家设置Activity不再全屏显示的原理。Android Theme也主要是通过定义Style来实现的,实现的原理大家可以直接看Android Framework中的定义,今天给一种更简单,但相对灵活的方法,比如不要Theme.Dialog中的边框,下面就一起来看下自定义Activity 大小的实现方法。
1. 创建一个样式文件到你的工程,保存在在res/values/styles.xml,这里文件名不能随便修改,内容为,注意保存时使用UTF-8编码。
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <style name="Theme.Android123" parent="android:style/Theme.Dialog">
- <item name="android:windowBackground">@drawable/bg</item>
- </style>
- </resources>
2. 上面我们定义的主题风格为Theme.Android123,父风格仍然从Theme.Dialog实现,但我们自定义了背景,位置在drawable/bg中,这里我们创建一个bg.xml文件放到res/drawable文件夹中,bg.xml的内容为
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:Android="http://schemas.android.com/apk/res/android">
- <padding android:left="15dp" android:top="15dp" android:right="15dp" android:bottom="15dp" />
- <stroke android:width="3dip" color="#000000" />
- <corners android:radius="5dp" />
- <solid android:color="#ffffff" />
- </shape>
里面我们定义了一个shape对象,实现背景drawable形状,其中padding代表距离边框,这里我们设置了左、上、右、下四个位置的间距。stroke可以制造出一些3D立体效果,corners是四个角,radisu属性可以设置半径,值越大越圆滑,根据运行效果你可以微调,最后 soild是填充颜色,这里我们用了ffffff表示纯白。
3. 最后在androidmanifest.xml中,在你的activity节点加一个 android:theme属性,值为@style/Theme.Android123 即可
-
Java如何设置一个窗口
2017-06-21 00:59:53具体就是点击Font这个菜单项,可以弹出一个新窗口,这个窗口可以调整这个"Opiuy"的大小 求大神帮忙做一个,目前实在是想不通思路!... -
实现定义android弹出activity设置大小
2013-05-09 20:51:00如何置设Activity的小大,让你的窗口看起来不再是全屏的。有些网友可能道知通过主题比如Theme.Dialog来实现,不过诉告大家置设Activity不再全屏表现的道理。Android Theme也主要是通过定义Style来实现的,实现的道理... -
eclipse如何设置编辑器字体大小
2020-04-18 10:37:45eclipse如何设置编辑器字体大小 eclipse是我们常用的代码编辑器,对于一些新手来说,往往觉得编辑器中的字体太小了,不方便看代码,那么怎么解决呢? 1.打开eclipse,选择“window”–> “preference”,单击打开... -
小米图标大小设置方法_miui12如何设置图标大小
2021-01-14 06:59:304、选择桌面设置后会弹出一个窗口,找到【更多设置】点击进入。5、进入桌面设置,点击【图标大小】设置。6、最后只需要左右滑动下方的滑块,查看上方的桌面图标预览观察效果,将桌面图标设置到自己想要的大小之后,... -
Myeclipse2016如何设置字体大小
2017-04-13 15:48:03jsp文件上右键选择首选项 然后在弹出的窗口里 选择常规-》外观-》颜色和字体-》基本-》文本字体 双击文本字体 弹出窗口 然后选择需要的字体大小 确定应用就行 -
如何实现UI弹出动画效果
2020-05-25 18:01:46如何实现UI弹出动画效果动画DoTween 动画 animation做 DoTween DoTween 首先导来入插件, 其次 使用DoTween的脚本需要引用 命名空自间, 创建执行放大效果的函数: public void WinDoScale() { Transform win = ... -
如何让 firefox 的窗口大小不再被网页脚本改变
2007-03-31 23:59:00有时候,firefox 的窗口大小会被你正在浏览的网页所改变(比如说点击 wordpress 后台“编辑 HTML”按钮的时候),这让我感到很不舒服,就像弹出广告一样,我相信大家都不会喜欢。其实有一个简单的方法可以让 firefox... -
窗口大小的值可以指定什么_Win7系统任务栏缩略图预览窗口大小的调节方法是什么?...
2021-01-27 08:50:16Win7系统任务栏预览窗口大小如何调节?大家都知道,任务栏的缩略图预览功能是非常不错的功能,但是对于任务栏缩略图预览窗口大小设置的方法是什么,相信知道的用户不多,那么win7系统任务栏缩略图预览窗口大小怎么... -
如何把表单提交到一个自定义大小的窗口 (转贴)
2006-04-15 20:23:00如何把表单提交到一个自定义大小的窗口 (转贴)原地址:http://www2.flash8.net/teach/4142.htm主要讲述了如何将数据提交到一个自定义弹出窗口。如何把表单提交到一个自定义大小的窗口 作者:闪吧 类型:原创 来源... -
antd select option 设置字体颜色_如何设置论文字体、颜色、大小,一共有三种办法,你会几种?...
2021-01-15 00:37:18上一期教大家学习了如何使用撤销与恢复功能的技巧,这一期我们继续学习如何设置文本内容中的字体、字号的小技巧。第一步,将鼠标移至文档上方工具栏的正文处,点击鼠标右键则会弹出修改样式的功能窗口,将鼠标移至... -
设置多行显示标签 vs_标签内容如何随字数多少按比例调整文字大小
2021-01-14 14:25:29在平时制作商品标签时,由于是批量生成的可变内容,所以有些商品名称的字数也是不一样多的,以及一些门牌...然后再点击上方工具栏中的“数据库设置”图标,点击“添加-Excel数据源管理”在弹出窗口中,点击“浏览”... -
在Pads中,在设计PCB板时,如何快速设置元器件的丝印大小?
2019-03-28 19:33:59按下Ctrl+Alt+F组合键,打开选择过滤器(Filter),去掉其它勾选项,只选择Labels,之后用鼠标选择你要修改的丝印,鼠标右键选择properties,弹出设置窗口,修改你所需要的“Size”“Line width”即可。 ... -
QML如何创建掩码窗口
2021-02-02 14:31:40满屏的触发按键,在弹出新窗口时需要对屏幕中非当前窗口的位置做一个灰度处理,不仅能够体现界面的层次感,而且能够防止误触到其他按键,导致异常处理,按规矩,先上图(左边原图,右边是弹出窗口后的图片): ... -
如何扩大CMD窗口显示的行数
2017-11-22 10:20:00如何扩大CMD窗口显示的行数 cmd窗口大小的默认值是80*40像素。有时用java在cmd窗口是处理行数比较多的txt格式的文本时,默认... 打开电脑,在屏幕上点鼠标右键,在弹出的显示属性中点“设置”,将“屏幕 -
ueditor如何设置上传图片的高度宽度_轻松调整图片尺寸大小的两个小技巧,无需下载任何软件,无需PS...
2020-12-03 14:40:58调整图片尺寸大小的两个小技巧上传图片至网站时,通常会有大小的限制,比如要求不超过5M/2M... “调整大小”,弹出“调整图像大小”窗口。03在“调整图像大小”窗口,点击“定义自定义尺寸”,进入图像尺寸自定义设... -
dword类型和十进制有什么区别_Win7系统任务栏缩略图预览窗口大小的调节方法是什么?...
2020-12-19 06:25:19Win7系统任务栏预览窗口大小如何调节?大家都知道,任务栏的缩略图预览功能是非常不错的功能,但是对于任务栏缩略图预览窗口大小设置的方法是什么,相信知道的用户不多,那么win7系统任务栏缩略图预览窗口大小怎么...