`

使用 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实现页面级缓存实践
评论
发表评论

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

相关推荐

    编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu

    在这个例子中，我们使用了JavaScript函数 `showSubMenu` 和 `hideSubMenu` 来控制二级菜单的显示与隐藏。这种方法可以确保菜单在IE等旧版浏览器中的兼容性。 #### 2. 编写横排底部弹出的CSS菜单 类似于垂直右侧弹...

    7-Zip for Asp.Net by shawl.qiu

    说明: 主要功能就是在线压缩, 解压缩... 这个程序是以 7-zip 的命令行版本为载体, 服务器不需要安装7-zip就可以使用本程序. &lt;br&gt;目前压缩格式支持: 7z, zip. 解压缩格式支持: 7z, zip, gzip, bzip2,...

    javascript 简单高效判断数据类型 系列函数 By shawl.qiu

    本文将介绍一系列由shawl.qiu提供的简单而高效的函数，用于判断JavaScript中的各种基本数据类型。 #### 二、判断是否为数组类型 在JavaScript中，数组是一种常用的数据结构，用于存储多个值。下面是一个简单的函数...

    服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu

    这篇文章由shawl.qiu撰写，主要探讨了这两种语言在服务端实现的一些共同特性，包括遍历集合/对象、转换变量值为变量并赋值以及动态包含文件的方法。 1. **遍历集合/对象** - **VBScript**：在VBScript中，可以使用...

    js prototype 格式化数字 By shawl.qiu

    例如，在Visual Basic Script (VBScript) 中，我们可以使用 `FormatNumber` 函数来方便地格式化数字，但在JavaScript中并没有提供类似的方法。为了弥补这一不足，本文将介绍一种通过扩展 `Number` 对象原型的方法来...

    ASP之简化创建关闭记录集对象并创建使用简单的MSSQL存储过程

    ASP 技巧一则之 简化创建关闭记录集对象并创建使用简单的MSSQL存储过程 By shawl.qiu 1. 建造 创建关闭记录集函数 2. 在MSSQL查询分析器中创建简单的MSSQL存储过程 3. 在ASP中应用步骤1,2 shawl.qiu 2006-8-...

    服务端 VBScript 与 JScript 几个相同特性的写法与示例

    By shawl.qiu 摘要: 本文演示了ASP服务端脚本的几个重要应用. 目录: 1. 遍历集合/对象 1.1 VBScript 遍历表单集合 1.2 JScript 遍历表单集合 2. 转变量值为变量, 并赋值 2.1 VBScript 转变量值为变量并...

    可用的ASP无重复数字随机函数, 数组实现, 并应用于随机显示记录集

     不建议使用本函数 shawl.qiu 2006-09-06 http://blog.csdn.net/btbtd 主内容: 函数及应用函数随机显示100条记录 linenum 代码如下:&lt;&#37; dim rs, rNum dim temp set rs=createObject(“adodb....

    c# .net 生成图片验证码的代码

    广告时间: shawl.qiu C# CMS 系统 预计40天后开始编码, 现在逐步设计中, 免得到时求职说什么什么作品…唉. PS: 今天求职真是惨不忍睹, 谁要招网页相关的请联系 13435580019, 邱先生. 什么地方俺都去, ...

    XSelect v1.0, XMenu v1.3, Select v1.3.1, Menu v1.0.1

    无限级菜单结构 与 列表框无限级联动, 类 XSelect by shawl.qiu 压缩包包含: XSelect v1.0, XMenu v1.3, Select v1.3.1, Menu v1.0.1 (带X的是单表, 不带X的是多表.)

    shawl:Windows服务包装程序，用于任意命令

    披肩 Shawl是用于将任何程序作为Windows... 使用Windows sc命令进行更多控制： sc create my-app binPath= "C:/path/shawl.exe run -- C:/path/my-app.exe" 然后正常启动或配置服务： sc config my-app start= auto

    高中英语单词天天记shawl素材

    **例句**：“The lady likes to wear the silk shawl.”（那女士喜欢用丝围巾。） - **句型结构**：主语 + 动词 + 宾语 + 定语。 - **语法分析**： - “The lady”为主语，表示句子的动作是由这位女士发出的。 - ...

    关于-衣服的英语单词.doc

    84. braces：裤子背带，代替腰带使用（美式拼写为suspenders）。 85. turnup：裤脚翻边，可以卷起裤腿。 86. breeches：马裤，骑马时穿着的短裤。 87. belt：裤带，用于固定裤子。 88. skirt：裙子，女性常见的下装...

    大学英语四级有关衣服的词汇.docx

    76. **Cuff**：袖口，通常可调节大小。 77. **Buttonhole**：用于扣纽扣的小开口。 78. **Sweater**：针织的保暖上衣，有多种款式和材质。 79. **Suit, outfit, ensemble**：成套的服装，包括上衣和裤子。 80. **...

    英语最常见的不可数名词.doc

    在英语中，不可数名词是指那些不能被计数或不能用数字来表示个数的名词。它们通常代表物质、抽象概念或无法分割的整体。...在学习和使用这些词汇时，应注意它们的用法和搭配，以提高语言的表达能力。

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