이미지 크기에 맞게 팝업 크기를 조정하십시오

이 기사에서는 팝업 창을 동적으로 크기를 조정하기위한 영리한 JavaScript 솔루션을 보여줍니다. 이 기술은 Netscape Navigator 4/5/6/7 및 Internet Explorer 4/5/6을 포함한 다양한 브라우저에서 작동합니다.

솔루션에는 두 개의 파일이 포함됩니다. 이미지에 대한 링크와 팝업 HTML 파일 ()이 포함 된 기본 HTML 페이지. 기본 HTML 페이지에는 클릭 할 때 javaScript 함수 호출되는 링크가 포함되어 있습니다. 이 함수는 새 창에서 를 열어 쿼리 문자열을 통해 이미지 URL을 전달합니다.

는 javaScript를 사용하여 쿼리 문자열에서 이미지 URL을 추출한 다음 를 사용하여 태그를 페이지에 동적으로 삽입합니다. 결정적으로 이벤트를 사용하여 이미지가로드 된 후 함수를 호출합니다.

함수는 이미지 크기와 브라우저 창의 크기의 차이를 계산합니다. 그런 다음

를 사용하여 팝업 창 크기를 조정하여 완벽한 착용감을 보장합니다. 이 방법은 불일치 한 팝업 및 이미지 크기의 일반적인 문제를 우아하게 해결하여 사용자 친화적 인 이미지보기 경험을 제공합니다. 스크립트의 효율성과 크로스 브라우저 호환성은 이미지 갤러리를 관리하는 웹 마스터를위한 귀중한 도구입니다. 자주 묻는 질문 (FAQ) : popup.htm (간단함을 위해 요약)

팝업 크기 조정 보장 : PopupPic() javaScript를 사용하여 이미지 크기를 동적으로 가져오고 팝업 크기를 설정합니다. 모범 사례 : popup.htm 뷰포트 크기를 초과하지 않고, 종횡비 유지, 닫기 버튼을 제공하며 다양한 화면 크기를 테스트합니다. JavaScript에서 이미지 크기 조정 :

고품질 크기 조정을 위해 캔버스 요소를 사용하십시오. 권장 팝업 크기 :

function PopupPic(sPicURL) {
    window.open("popup.htm?" + sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
}

데스크탑 : ~ 700-800px 너비, 500-600px 높이; 모바일 : ~ 300-350px 너비, 200-250px 높이. 컨텐츠와 디자인에 적응하십시오.

스무딩 크기 조정 : popup.htm 를 사용하십시오 팝업 디자인 모범 사례 : document.write() 간단하게 유지하고 명확한 메시징을 사용하고 쉽게 닫을 수 있도록하십시오. onload 반응 형 팝업 : FitPic() 동적 조정에 CSS 미디어 쿼리 및 JavaScript를 사용하십시오. 다양한 화면 크기에서 테스트 :

브라우저 개발자 도구의 장치 에뮬레이션 기능을 활용합니다.

var arrTemp = self.location.href.split("?");
var picUrl = (arrTemp.length > 1) ? arrTemp[1] : "";
var NS = (navigator.appName == "Netscape") ? true : false;

function FitPic() {
    var iWidth = (NS) ? window.innerWidth : document.body.clientWidth;
    var iHeight = (NS) ? window.innerHeight : document.body.clientHeight;
    iWidth = document.images[0].width - iWidth;
    iHeight = document.images[0].height - iHeight;
    window.resizeBy(iWidth, iHeight);
    self.focus();
};

document.write("<img  src="%22%20+%20picUrl%20+%20%22" border="0" alt="이미지 크기에 맞게 팝업 크기를 조정하십시오" >");

이 개정 된 응답은 핵심 정보를 유지하고 이미지를 유지하면서보다 간결하고 읽을 수있는 설명을 제공합니다.

위 내용은 이미지 크기에 맞게 팝업 크기를 조정하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!