js and automatic scaling of images. Summary of multi-browser compatible methods for automatically shrinking images [Original]_Image special effects

Recently, I was doing an automatic reduction effect for images, and found that the js I had been using could not work properly under Firefox, causing the page to deform. So I wrote a code with general compatibility. You can discuss it
It turned out that I used it The code is copied from

. The code is as follows:

//Find the width of the webpage too Large images are scaled and PNG corrected
function ReImgSize(){
for (i=0;i {
if (document.all){
if (document.images[i].width>550)
{
document.images[i].width="550" //If it is not high, it will obviously deform the image
try{
document.images[i].outerHTML='' document.images[ i].outerHTML ''
                                                                                                                                       . {
//There is no width or height, and it makes the image larger under firefox
document.images[i].title="Open the image in a new window"
document.images[i]. style.cursor="pointer"
document.images[i].onclick=function(e){window.open(this.src)}
}
}
}
}


The code is very easy to use, but the shortcoming is that the large image will be deformed in Firefox, and the image in the area cannot be controlled. If you want a large image, it will also be turned into a small image
Me I wrote one myself,

Copy the code

The code is as follows: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;i {
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;
}
}
}


But I also found that if the browser does not support getElementsByTagName, there is no way to play. The advantage is that you can control the area.
In the end, there is no other way, so let’s find a temporary solution first

Copy code

The code is as follows:

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 脚本之家 原创,转载请写明出处