您的位置：首页 > Web前端 > JavaScript

使用 javascript 函数 完美控制页面图片显示大小(第二版) By shawl.qiu

2006-11-16 19:26 906 查看

使用 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.onload=function(){
        fResizeImg(400, 300, 'table');
        //fResizeImg(500, 500);
    }
    /*------------------------------------------------------*/
     * Subject: 使用 javascript 函数 完美控制页面图片显示大小 By shawl.qiu  
     * 使用:
     * --------------------------------------
     * 1. Javascript 脚本块
     *    window.onload=function(){
     *        fResizeImg(500, 500, 'img');
     *        //fResizeImg(500, 500);
     *    }
     *
     * 2. html body 标签
     * <body onload="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.onclick=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.onclick=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 function firefox table opera border
相关文章推荐
新的分享
章节导航