`

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

JavaScriptFirefoxOperaIE脚本 
阅读更多
使用 javascript 函数 完美控制页面图片显示大小 By shawl.qiu 函数 fResizeImg(w, h, id) 功能说明: 1. 本函数实现了指定高宽度显示图片大小 2. 本函数实现了按比例显示指定的高宽度 3. 本函数实现了是否指定 id 进行操作, 若不指定 id, 默认为页面全部图片. 4. 本函数实现了自动添加单击事件 4.1 单击图片后弹出一个窗口显示图片 4.2 再单击弹出的窗口则关闭本窗口 5. 弹出窗口按图片大小居中显示 6. 完美支持 IE, Opera 浏览器, 但对 Firefox 支持不够完善(由于个人习惯, 鄙人不打算费精力去完善对 Firefox 的支持) 目录: 1. fResizeImg(w, h, id) 函数源码及调用演示 shawl.qiu 2006-10-27 http://blog.csdn.net/btbtd

 

<!---->

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


函数 fResizeImg(w, h, id) 功能说明:
1. 本函数实现了指定高宽度显示图片大小
2. 本函数实现了按比例显示指定的高宽度
3. 本函数实现了是否指定 id 进行操作, 若不指定 id, 默认为页面全部图片.
4. 本函数实现了自动添加单击事件
4.1 单击图片后弹出一个窗口显示图片
4.2 再单击弹出的窗口则关闭本窗口
5. 弹出窗口按图片大小居中显示
6. 完美支持 IE, Opera 浏览器, 但对 Firefox 支持不够完善(由于个人习惯, 鄙人不打算费精力去完善对 Firefox 的支持)

目录:
1. fResizeImg(w, h, id) 函数源码及调用演示

shawl.qiu 
2006-10-27
<script type="text/javascript">
//<!----> window.onload=function(){
    fResizeImg(500, 500, 'img');
    //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');">
     * --------------------------------------
     * 注: 必须在页面加载完毕后使用本函数(这是基本的客户端应用概念)
    \*-------------------------------------------------------*/
    //---------------------------------begin function fResizeImg();
    function fResizeImg(w, h, id){
        var img='';
        var obj;
        if(id==undefined)obj=document.images;
        else obj=document.getElementById(id).getElementsByTagName('img');
        
        for(var i=0; i<obj.length; i++){="" <br="">             img=obj[i];
            if(img.width>w&&(img.height<img.width)){ <br="">                 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{ imgPopup.close();} catch(e){}
                imgPopup=open('#', 'imgurl', 'width=500, height=500, left='+(screen.availWidth-500)/2+
                ', top='+(screen.availHeight-500)/2)
                imgPopup.document.write('<script>document.onclick=function(){ close();} /* 单击关闭窗口 */ <\/script>');
                
                imgPopup.document.write(''+
                    '<script>'+
                        'var w, h;'+
                        'var img=document.images[0];'+
                        'if(navigator.appName=="Opera"){w=img.width+10; h=img.height+40} else {w=img.width+10; h=img.height+25};'+
                        'self.resizeTo(w, h);'+
                        'self.moveTo((screen.availWidth-img.width)/2,(screen.availHeight-img.height)/2)'+
                    '<\/script>'+
                    '<style>body{margin:0; padding:0;} .hd{visibility:hidden;}<\/style>');
                imgPopup.document.write('

ok

');
                imgPopup.document.close();
                imgPopup.focus();
            }
        } // shawl.qiu script
    }
    //---------------------------------end function fResizeImg();
//]]>
</script>

js 代码
  1. <script type="text/javascript">    
  2. //<![CDATA[    
  3. window.onload=function(){    
  4.     fResizeImg(500, 500, 'img');    
  5.     //fResizeImg(500, 500);    
  6. }    
  7.     /*------------------------------------------------------*\   
  8.      * Subject: 使用 javascript 函数 完美控制页面图片显示大小 By shawl.qiu     
  9.      * 使用:   
  10.      * --------------------------------------   
  11.      * 1. Javascript 脚本块   
  12.      *    window.onload=function(){   
  13.      *        fResizeImg(500, 500, 'img');   
  14.      *        //fResizeImg(500, 500);   
  15.      *    }   
  16.      *   
  17.      * 2. html body 标签   
  18.      * <body onload="fResizeImg(500, 500, 'textMain');" >   
  19.      * --------------------------------------   
  20.      * 注: 必须在页面加载完毕后使用本函数(这是基本的客户端应用概念)   
  21.     \*-------------------------------------------------------*/    
  22.     //---------------------------------begin function fResizeImg();    
  23.     function fResizeImg(w, h, id){    
  24.         var img='';    
  25.         var obj;    
  26.         if(id==undefined)obj=document.images;    
  27.         else obj=document.getElementById(id).getElementsByTagName('img');    
  28.             
  29.         for(var i=0; i<obj.length; i++){    
  30.             img=obj[i];    
  31.             if(img.width>w&&(img.height<img.width)){    
  32.                 img.height=img.height-(img.height/(img.width/(img.width-w)))    
  33.                 img.width=w;    
  34.             }else if(img.height>h&&(img.height>img.width)){    
  35.                 img.width=img.width-(img.width/(img.height/(img.height-h)))    
  36.                 img.height=h;    
  37.             }    
  38.                 
  39.             img.onclick=function(){    
  40.                 try{ imgPopup.close();} catch(e){}    
  41.                 imgPopup=open('#', 'imgurl', 'width=500, height=500, left='+(screen.availWidth-500)/2+    
  42.                 ', top='+(screen.availHeight-500)/2)    
  43.                 imgPopup.document.write('<script>document.onclick=function(){ close();} /* 单击关闭窗口 */ <\/script>');    
  44.                     
  45.                 imgPopup.document.write('<img src="'+this.src+'"/>'+    
  46.                     '<script>'+    
  47.                         'var w, h;'+    
  48.                         'var img=document.images[0];'+    
  49.                         'if(navigator.appName=="Opera"){w=img.width+10; h=img.height+40} else {w=img.width+10; h=img.height+25};'+    
  50.                         'self.resizeTo(w, h);'+    
  51.                         'self.moveTo((screen.availWidth-img.width)/2,(screen.availHeight-img.height)/2)'+    
  52.                     '<\/script>'+    
  53.                     '<style>body{margin:0; padding:0;} .hd{visibility:hidden;}<\/style>');    
  54.                 imgPopup.document.write('<p class="hd">ok</p>');    
  55.                 imgPopup.document.close();    
  56.                 imgPopup.focus();    
  57.             }    
  58.         } // shawl.qiu script    
  59.     }    
  60.     //---------------------------------end function fResizeImg();    
  61. //]]>    
  62. </script>    
分享到：
| 用CashFilter实现页面级缓存实践
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics