이 기사는 참조에 대한 JS의 이미지 확대 효과를 공유합니다. 특정 내용은 다음과 같습니다
<! doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <스타일 유형 = "text/css"> #div1 {너비 : 300px; 높이 : 300px; 위치 : 상대; 여백 : 30px 자동 0px; } #div1 img {너비 : 300px; } #div1 span {너비 : 150px; 높이 : 150px; 배경 : 빨간색; 위치 : 절대; 왼쪽 : 0px; 상단 : 0px; 디스플레이 : 없음; 불투명도 : 0.2; } .show {너비 : 100%; 높이 : 100%; 배경 : 빨간색; 위치 : 절대; 왼쪽 : 0px; 상단 : 0px; z- 인덱스 : 10px; 불투명도 : 0.1; } #div2 {너비 : 300px; 높이 : 300px; 위치 : 상대; 상단 : -300px; 왼쪽 : 300px; 디스플레이 : 없음; 오버플로 : 숨겨진; 마진 : 0px auto 0px; } #img1 {위치 : 절대; . src = "images/xiangqingda.png"/> </div> </body> <cript> //로드가 완료된 후 Window.onload = function () {var odiv = document.getElementById ( 'div1'); var Oshow = document.getElementsByClassName ( 'show') [0]; var ospan = document.getElementsByTagName ( 'span') [0]; var oimg = document.getElementById ( 'img1'); // parentNode는 부모 노드를 가져옵니다. OSHOW.onMouseOver = function () {ospan.style.display = 'block'; oimg.parentnode.style.display = 'block'; }; OSHOW.onMouseOut = function () {ospan.style.display = ''; oimg.parentnode.style.display = ''; }; // 앰프가 움직입니다. OSHOW.onMousEmove = function (EV) {// 브라우저 호환성 문제 해결 varoevent = ev || event; // 마우스 위치를 가져옵니다 var x = oevent.offsetx-ospan.offsetWidth/2; var y = oevent.offsety-ospan.offsetheight/2; // console.log (oevent.clienty); // console.log (odiv.offsettop); // console.log (Ospan.offSetheight/2); // console.log (oevent.clienty); if (x <0) {x = 0; } else if (x> oshow.offsetWidth-OSPAN.OffSetWidth) {x = OSHOW.OffSetWidth-ospan.OffSetWidth; } if (y <0) {y = 0; } else if (y> oshow.offsetheight-ospan.offsetheight) {y = oshow.offsetheight-ospan.offsetheight; } // 선택한 상자 ospan.style.left = x+'px'; ospan.style.top = y+'px'; // 앰프 var 퍼센트 x = x/(Oshow.offsetWidth-Ospan.OffSetWidth); var resenty = y/(Oshow.offsetheight-ospan.offsetheight); var oimgparent = oimg.parentNode; oimg.style.left = -percentx*(oimg.offsetwidth-oimgparent.offsetwidth)+'px'; oimg.style.top = -percenty*(oimg.offsetheight-oimgparent.offsetheight)+'px'; }; }; }; </script> </html>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.