使用javascript 函数完美控制页面图片显示大小 qq

2012年4月2日 发表评论 阅读评论

message/

函数 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) 函数源码及调用演示

    linenum

  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>


转载请注明来自:[MSN Spaces]http://msn.shandian.biz/361.html

  1. 本文目前尚无任何评论.