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

Posted

篇首语:世上最累人的事,莫过于虚伪的过日子。本文由小常识网(cha138.com)小编为大家整理,主要介绍了知识大全 自适应图片大小的弹出窗口相关的知识,希望对你有一定的参考价值。

  很多时候我们需要提供这样的功能给访问者 当访问者点击页面中的缩略图时 其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看

  实现此功能的最简单作法是用以下HTML代码创建一个图像链接   <a target= _blank ><img src= small jpg ></a>   其中<a>标记的href属性指定全尺寸图片的URL target属性设置为_blank指定在新窗口中显示该图片 <img>标记的src属性指定缩略图的URL

  如果我们想对显示全尺寸图片的窗口的外观进行某些控制(比如希望弹出窗口的高度 宽度能与全尺寸图片的大小匹配时) 则可调用 window open 方法 该方法接收三个参数 分别指定要打开文件的URL 窗口名及窗口特性 在窗口特性参数中可指定窗口的高度 宽度 是否显示菜单栏 工具栏等 以下代码将显示全尺寸图片在一个没有工具栏 地址栏 状态栏 菜单栏 宽 高分别为 的窗口中   <a onClick= window open(this href height= width= toolbar=no location=no status=no menubar=no);return false ><img src= small jpg ></a>

  这里就提出了个问题 如果所有全尺寸图片都具有统一的大小(比如都是 x ) 那么以上代码适用于所有的缩略图片链接(只是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 != ) && (imgObj height != ))  // 根据取得的图像高度和宽度设置弹出窗口的高度与宽度 并打开该窗口  // 其中的增量 和 是设置的窗口边框与图片间的间隔量  OpenFullSizeWindow(theURL winName width= + (imgObj width+ ) + height= + (imgObj height+ ));  else  // 因为通过 Image 对象动态装载图片 不可能立即得到图片的宽度和高度 所以每隔 毫秒重复调用检查  setTimeout( checkImg( + theURL + + winName + ) )    

  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>

cha138/Article/program/Java/Javascript/201311/25347

相关参考

知识大全 让弹出窗口变得“体贴”一些

在网上冲浪时进入一些网站会出现弹出窗口它可能是站长对你的亲切问候也可能是网站的重要通告网站广告之类的但用得不好会让人产生厌烦心理如何才能让弹出窗口发挥作用而又不影响浏览者浏览页面呢?  一般的弹出窗口

知识大全 mvc下,3种窗口弹出设置的方法

想做页面美化特别是在一个页面中只占了很小一块的页面想做成弹出窗口样式稍微总结了下   通过重写<input标签下按钮的onclick事件来进行窗口的弹出设置复制代码代码如下:<i

知识大全 GridView弹出新页面弹出制定大小位置新窗口

GridView弹出新页面弹出制定大小位置新窗口  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  

知识大全 控制IE的弹出页面

PHP典型模块与项目实战大全:控制IE的弹出页面  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!  

知识大全 Jquery中LigerUi的弹出编辑框(实现方法)

Jquery中LigerUi的弹出编辑框(实现方法)  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!

知识大全 HTML5页面的弹出框,手机输入法打开后遮住了弹出框,如何解决

HTML5页面的弹出框,手机输入法打开后遮住了弹出框,如何解决?  以下文字资料是由(本站网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来

知识大全 完全解析浏览器挡不住的网页对话框广告

  一个强制弹出窗口的JavaScript类ForceWindow一个可以不被广告拦截器拦截的弹出窗口  ForceWindowiclassjs代码如下(使用讲解相关说明全部在注释中)

知识大全 ASP打开网页自适应窗口最大化

ASP打开网页自适应窗口最大化  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!cha138

知识大全 excel表格里单元格插入图片,有什么方法能让图片自动适应单元格大小么,每次都调整图片大小很麻烦

excel表格里单元格插入图片,有什么方法能让图片自动适应单元格大小么,每次都调整图片大小很麻烦不行的。。虽然格片格式里有一个自动根据单元格来改变大小和位置。但不能实现和单元格一样的。因为你图片有估定

知识大全 javascript弹出窗口问题总结

无提示刷新网页  大家有没有发现有些网页刷新的时候会弹出一个提示窗口点确定才会刷新而有的页面不会提示不弹出提示窗口直接就刷新了如果页面没有form则不会弹出提示窗口如果页面有form表单  a)<