it_javascript 스킬 저장 대신 자바스크립트 기반으로 그림 팝업창 구현

썸네일을 클릭하면 팝업되는 플러그인을 항상 설치하고 싶었지만 검색해 보니 거의 대부분 PHP를 사용하여 제작되어 있어서 플러그인의 사용과 설치가 엄청나게 번거롭습니다. 온라인에서 일부 데모를 확인하고 순수 js를 직접 구현했습니다.

구현 아이디어는 이미지의 onclick 이벤트를 연결하는 함수를 작성하고 함수의 본문에 div 요소를 추가한 다음 들어오는 이미지 객체를 요소에 넣고 동시에 듣는 것입니다. 클릭이 캡처되면 팝업 div를 닫습니다(실제로 숨깁니다).

함수가 초기화될 때 페이지의 모든 img 요소를 수집한 다음 각 img 요소에 onclick="picHook(this)" 속성을 추가하면 이 함수는 이미지를 클릭할 때 자동으로 div를 생성할 수 있습니다. 배경, 클릭한 이미지의 너비와 높이를 가져오고 이미지를 표시할 이미지와 동일한 크기의 새 div를 생성합니다. 마스크를 다시 클릭하면 후크 이벤트가 다시 응답하고 마스크 및 이미지 div의 스타일이 없음으로 설정되고 팝업 이미지가 닫힙니다.

말하기는 쉽지만, 구현하는 데는 함수 하나만 있으면 될 정도로 간단합니다.

말하는 것이 저렴합니다. 내 코드를 보여주세요.

<script>
function picHook(pic){
/*图片对象*/
var imgs = document.getElementsByTagName("img");
/*前景div*/
var light = document.getElementById('light') || document.createElement("div");
/*背景div*/
var bg = document.getElementById('bg') || document.createElement("div");
/*图片放大*/
var s_pic = document.getElementById('s_pic') || document.createElement("img");
/*css对象*/
var css = document.createElement("style");
/*css样式*/
var csstext = '\
.pic_bg{\
position: absolute;\
margin:0 auto; \
top: 0%;\
left: 0%;\
width: 100%;\
padding-bottom: 1000%;\
background-color: black;\
z-index:1001;\
opacity:.80;\
filter: alpha(opacity=80);\
overflow:scroll;\
}\
.pic_div {\
margin-bottom: auto;\
position: fixed;\
left:50%;\
top:50%;\
margin-left:-250px;\
margin-top:-100px;\
z-index:1002;\
}';
/*收集页面所有图片对象*/
for(i=0; i<imgs.length;i++){
imgs[i].setAttribute("onclick", "picHook(this)" );
}
css.type = "text/css";

/*关闭图像*/
if( !pic ){
bg.style.display = light.style.display = "none";
}
/*ie兼容*/
if(css.styleSheet){
css.styleSheet.cssText = csstext;
}else{
css.appendChild(document.createTextNode(csstext));
}
s_pic.setAttribute("id", "s_pic");
s_pic.setAttribute("src", pic.src);
light.setAttribute("id", "light");
light.setAttribute("class", "pic_div");
light.style.display = 'block';
light.appendChild(s_pic);
bg.setAttribute("id", "bg");
bg.setAttribute("class", "pic_bg");
bg.setAttribute("onclick", "picHook()");
bg.style.display = light.style.display;
document.getElementsByTagName("head")[0].appendChild(css); 
document.body.appendChild(bg);
document.body.appendChild(light);
}
</script>

이 코드를 페이지 헤드에 저장한 다음 본문의 onload 이벤트를 picHook() 함수에 바인딩하면 이미지를 클릭할 때 페이지에 큰 이미지 팝업이 나타날 수도 있습니다.

아직도 약간의 버그가 있습니다. 주로 제가 CSS에 익숙하지 않아서 div 스타일이 약간 보기 흉하기 때문입니다.

js에서 직접 CSS 스타일을 선언하므로 별도의 CSS 파일을 생성할 필요가 없습니다.

CSS에 대해 생각하고 스타일을 최적화하기 전에 이 섹션이 끝날 때까지 기다리세요. JavaScript를 사용하여 이미지 팝업 창을 저장하는 대신 구현하는 방법에 대해 이 기사에서 공유한 지식이 도움이 되기를 바랍니다.