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

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

WBOY

풀어 주다： 2016-05-16 19:16:53

원래의

1166명이 탐색했습니다.

최근에 이미지 자동 축소 효과를 하다가 제가 사용하던 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 脚本之家原创,转载请写明处