-
使用 javascript 函数 完美控制页面图片显示大小(第二版) By shawl.qiu
说明:
不想重复描述相同的事, 第一版链接及其详细说明在这:
http://blog.csdn.net/btbtd/archive/2006/10/27/1353481.aspx
本版实现了完全 兼容 IE, Opera, Firefox 的显示, 及优化相关操作代码.
shawl.qiu
2006-11-16
http://blog.csdn.net/btbtd
函数 fResizeImg(w, h, id) 源码及使用演示:
- linenum
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns=" http://www.w3.org/1999/xhtml">
- <!-- DW6 -->
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>shawl.qiu template</title>
- <script type="text/javascript">
- //<![CDATA[
- window.οnlοad=function(){
- fResizeImg(400, 300, 'table');
- //fResizeImg(500, 500);
- }
- /*------------------------------------------------------*/
- * Subject: 使用 javascript 函数 完美控制页面图片显示大小 By shawl.qiu
- * 使用:
- * --------------------------------------
- * 1. Javascript 脚本块
- * window.οnlοad=function(){
- * fResizeImg(500, 500, 'img');
- * //fResizeImg(500, 500);
- * }
- *
- * 2. html body 标签
- * <body οnlοad="fResizeImg(500, 500, 'textMain');" >
- * --------------------------------------
- * 注: 必须在页面加载完毕后使用本函数(这是基本的客户端应用概念)
- * --------------------------------------
- * 参数说明:
- * w: 数值, 设置最大宽度, 图片宽度大于该值则设置大小为该值
- * h: 数值, 设置最大高度, 图片高度大于该值则设置大小为该值
- * id: 字串, 设置函数作用域 ID, 如不设置, 作用于全页面.
- /*-------------------------------------------------------*/
- //-----------------------------begin function fResizeImg(w, h, id)-------------------------//
- function fResizeImg(w, h, id){
- var img, obj;
- if(!id)obj=document.images;
- else obj=document.getElementById(id).getElementsByTagName('img');
- for(var i=0; i<obj.length; i++){
- img=obj[i];
- if(img.width>w&&(img.height<img.width)){
- img.height=img.height-(img.height/(img.width/(img.width-w)))
- img.width=w;
- }else if(img.height>h&&(img.height>img.width)){
- img.width=img.width-(img.width/(img.height/(img.height-h)))
- img.height=h;
- }
- img.οnclick=function(){
- try{ w.close();} catch(e){}
- var temp=new Image();
- temp.src=this.src;
- var wW=temp.width;
- var wH=temp.height;
- w=open('#', 'imgurl', 'width='+wW+', height='+wH+
- ', left='+(screen.availWidth-wW)/2+', top='+(screen.availHeight-wH)/2);
- w.document.write('<script>document.οnclick=function(){ close();}<//script>');
- w.document.write('<img src="'+this.src+'"/>',
- '<style>body{margin:0; padding:0;} .hd{visibility:hidden;}<//style>');
- w.focus();
- w.document.close();
- return true;
- }
- } // shawl.qiu script
- return true;
- }
- //-----------------------------end function fResizeImg(w, h, id)---------------------------//
- //]]>
- </script>
- </head>
- <body>
- <table width="100%" border="1" id="table">
- <tr>
- <td><img src="temp/2006-10-15/01.jpg" width="400" height="381" /></td>
- <td><img src="mod/system/themes/default/default/images/gi_logo_88_31.png" width="88" height="31" /></td>
- <td><img src="mod/system/themes/default/default/images/gi_logo_88_31.png" width="88" height="31" /></td>
- </tr>
- <tr>
- <td><img src="mod/managemain/themes/default/default/images/gi_logo_300_92.png" width="300" height="92" /></td>
- <td><img src="images/03_1.jpg" width="832" height="1126" /></td>
- <td><img src="images/gi_logo_300_92.png" width="300" height="92" /></td>
- </tr>
- <tr>
- <td><img src="images/04.jpg" width="640" height="467" /></td>
- <td> </td>
- <td> </td>
- </tr>
- </table>
- </body>
- </html>
使用 javascript 函数 完美控制页面图片显示大小(第二版) By shawl.qiu
最新推荐文章于 2024-09-07 13:38:28 发布