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


    怎么样弹出与图片同样大小的窗口?
    在论坛上问过这个问题的不在少数,以前可以用无边窗口,自从IE6.0的SP1出现以后无边窗口成了coder唾骂M$的又一理由,扯远了,收回。在实现这个其实并不复杂,主要思路是用window.open()方法打开一个窗口,然后再根据图片的大小resizeTo()窗口大小,必要时再用moveTo()方法调整窗口位置。现在问题在于如何获取图片的大小。
    方法一。我们知道,DHTML里有个Image()对象,只要设置图片源src后就可以用obj.width和obj.height获取图片的宽和高,这两个数据有了之后就可以给window.open()里控制窗口大小的参数一个定值了,不过要注意,要把窗口边框、标题栏高度计算在内。具体实现过程和方法参考这里:<a href="http://www.blueidea.com/tech/program/2003/104.asp" target="_blank" >http://www.blueidea.com/tech/program/2003/104.asp<;/A>
    方法二。如果你稍微细心一点,应该会发现,当不指定图片的大小时,图片默认显示原始大小,这时用obj.width和obj.height取到的也是图片的宽和高的真实值。所以可以先用window.open()方法打开一个空窗口,再以流方式给窗口写入调用图片的代码,在图片加载完后有个onload方法,用它触发resizeTo()改变窗口大小。代码如下:
    <script>
    function fiximgwin(url)
    { var imgwin=window.open('','img','width=50,height=50')//打开一个空白窗口,并初始化大小
    imgwin.focus()//使窗口聚焦,成为当前窗口
    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>"//这里是关键代码,在图片加载完后调用resizeTo()和moveTo()方法调整窗口大小和位置
    var doc=imgwin.document
    doc.open("text/html","replace") //指定文档的多用途网际邮件扩充协议
    doc.write(HTML)//向空白窗口写入代码
    doc.close()//关闭输入流,并强制发送数据显示。
    } </script>
    <img onclick=fiximgwin("images/wfsr.gif") src=wfsr.gif>
    <img onclick=fiximgwin("banner.gif") src=images/logo.gif>
    代码就这么多,如果网站里需要用到这种效果的地方很多,可以考虑把它做成HTC,大图的地址可以通过自定义属性方式确定。

  • 相关阅读:
    复习一allure
    本地push 到git hub 二
    项目过程中,测试总感觉自己的时间不够怎么办?
    记一次接口并发,酿成20万损失的惨案
    记录一次管理员组织应用的运行
    记录一次jmeter脚本开发缺少utf-8惹的祸
    记录一次pycharm中,引入其他类可用,下面总是有波浪线,而且Ctrl+b 无法查看类函数的源码
    Fiddler如何过滤无用的链接
    【bat】将当前文件夹及其子文件夹下的所有文件移动到新文件夹中
    python 安装python-docx模块(如何本地安装)
  • 原文地址:https://www.cnblogs.com/MaxIE/p/350171.html
Copyright © 2020-2023  润新知