自适应图片大小的弹出窗口
时间： 2021-07-31 作者：daque
很多功夫咱们须要供给如许的功效给考察者：当考察者点击页面中的缩略图时，其对应的全尺寸图片将表露在一个新的弹出窗口中供考察者察看。 实行此功效的最大略作法是用以次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中尝试经过。
相关推荐
推荐下载
热门阅览
最新排行
- 1 手机如何装windows系统，手机装windows系统教程
- 2 微信公众号重大调整 新公注册公众号将没有留言功能
- 3 烧杯app最剧烈的反应有哪些？ 烧杯app攻略
- 4 微信小程序怎么用 微信小程序使用教程
- 5 360快剪辑怎么使用？360快剪辑图文视频教程
- 6 八分音符外挂神器：绝望中的战斗机
- 7 2017热门微信小程序排行榜 微信小程序二维码大全
- 8 微信聊天记录导出到电脑 怎么在电脑上查看微信聊天记录
- 9 在U递上赚钱和省钱教程 教你在U递上怎么赚钱何省钱
- 10 u递邀请码申请教程 u递邀请码领取方法
- 11 如何解决爱奇艺账号登陆验证 跳过爱奇艺账号手机登录验证方法分享 亲测好用
- 12 手机申请无限制申请QQ靓号 手机怎样无限申请Q号