js 및 이미지 자동 크기 조정 이미지 자동 축소를 위한 다중 브라우저 호환 방법 요약 [원본]_이미지 특수 효과

최근에 이미지 자동 축소 효과를 하다가 제가 사용하던 js가 Firefox에서 제대로 작동하지 않아 페이지가 변형되는 것을 발견하여 일반적인 호환성을 갖춘 코드를 작성했습니다
. 사용해본 결과 코드는

에서 복사한 것입니다. 🎜>//웹페이지 너비 찾기 큰 이미지는 크기가 조정되고 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 ''
                                                 >
document.images[i].title="새 창에서 이미지 열기"
document.images[i].style.cursor="pointer"
document.images[i].onclick= function(e){window.open(this.src)}
}
}
}
}


코드는 사용하기 매우 쉽지만 단점 파이어폭스에서는 큰 이미지가 변형되어 그 영역의 이미지를 조절할 수 없다는 점입니다. 큰 이미지를 원하시면 작은 이미지로도 변환됩니다
제가 직접 작성했습니다




코드 복사

코드는 다음과 같습니다.

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 .. 참고: 중첩된 레이어는 찾을 수 없습니다.
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; i].width="500";
imgall[i].height=oHeight*500/oWidth;
}
}
}


하지만 나도 찾았어 브라우저가 getElementsByTagName을 지원하지 않으면 플레이할 방법이 없다는 점이죠. 영역을 제어할 수 있다는 장점이 있습니다.
결국 다른 방법이 없으니 우선 임시 해결 방법을 찾아보겠습니다




코드 복사

코드는 다음과 같습니다.

함수 ReImgSize(){
  for (i=0;i   {
   if (document.all){
    if(문서 .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 脚本之家 原创,转载请写明处