Maison > interface Web > js tutoriel > le corps du texte

js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结[原创]_图象特效

WBOY
Libérer: 2016-05-16 19:16:53
original
1130 Les gens l'ont consulté

最近做一个图片的自动缩小效果,发现一直用的js,竟然在firefox下无法正常啊,导致页面变形.所以自己写了个兼容性一般的代码,大家可以来讨论下
原来我用的是从pjblog上的

复制代码 代码如下:

//查找网页内宽度太大的图片进行缩放以及PNG纠正
 function ReImgSize(){
  for (i=0;i   {
   if (document.all){
    if (document.images[i].width>550)
     {
       document.images[i].width="550"  //没有高,明显会让图片变形
       try{
           document.images[i].outerHTML=''+document.images[i].outerHTML+''
           }catch(e){}
       }
   }
  else{
    if (document.images[i].width>400) {
//宽和高都没有,更是让firefox下图片撑大图片
      document.images[i].title="在新窗口打开图片"
      document.images[i].style.cursor="pointer"
      document.images[i].onclick=function(e){window.open(this.src)}
    }
  }
  }
 }

非常好用的代码可不足的地方就是firefox下大图会变形,而且无法控制区域的图片,如果想要的大图,也被变成小图了
我自己写了个,
复制代码 代码如下:

function $(objectId) { 
     if(document.getElementById && document.getElementById(objectId)) { 
    // W3C DOM 
       return document.getElementById(objectId); 
     }  
     else if (document.all && document.all(objectId)) { 
    // MSIE 4 DOM 
       return document.all(objectId); 
     }  
     else if (document.layers && document.layers[objectId]) { 
    // NN 4 DOM.. note: this won't find nested layers 
       return document.layers[objectId]; 
     }  
     else { 
       return false; 
    } 
}
function dxy_ReImgSize(){
var box=$("dxy_content");
var imgall=box.getElementsByTagName("img")
  for (i=0;ijs与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结[原创]_图象特效   {
    if (imgall[i].width>500)
     {
    var oWidth=imgall[i].width;
    var oHeight=imgall[i].height;
    imgall[i].width="500";
    imgall[i].height=oHeight*500/oWidth;
       }
    }
}

可又发现,如果低浏览器,不支持getElementsByTagName,就没的玩了,好处是可以控制区域.
最后没办法了,就先弄个,暂时的解决办法
复制代码 代码如下:

function ReImgSize(){
  for (i=0;i   {
   if (document.all){
    if (document.images[i].width>500)
     {
       var oWidth=document.images[i].width;
       var oHeight=document.images[i].height;
       document.images[i].width="500";
       document.images[i].height=oHeight*500/oWidth;
       document.images[i].outerHTML=''+document.images[i].outerHTML+''
       }
   }
  else{
    if (document.images[i].width>500) {
       var oWidth=document.images[i].width;
       var oHeight=document.images[i].height;
       document.images[i].width="500";
       document.images[i].height=oHeight*500/oWidth;
      document.images[i].title="在新窗口打开图片";
      document.images[i].style.cursor="pointer"
      document.images[i].onclick=function(e){window.open(this.src)}
    }
  }
  }
 }

注意我增加了
复制代码 代码如下:

var oWidth=document.images[i].width; 
       var oHeight=document.images[i].height; 
       document.images[i].width="500"; 
       document.images[i].height=oHeight*500/oWidth; 

如果大家发现了什么更好的方法,贴出来啊
www.jb51.net 脚本之家 原创,转载请写明出处
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!