이 효과는 어렵지 않습니다. 위치와 비율을 설정하는 것이 핵심입니다. 마우스 위치 캡처, 마우스 위치 영역 결정 및 onmouseover 이벤트, onmousemove 이벤트, onmouseout 이벤트 표시되는 큰 이미지의 비율을 설정합니다. 작은 이미지에 표시되는 잘라낸 이미지의 비율은 정확해야 하며 가급적 2배 또는 4배가 좋습니다. 주로 너비에 주의하세요. 제가 여기 가지고 있는 이미지 m.jpg는 1440X900입니다.... 코드 복사 코드는 다음과 같습니다. 돋보기 효과<br>* {margin:0;padding:0;}<br>#smallimg{width:360px;float:left;position:relative;border:1px solid red;}<br>#smallimg img{ width :360px;}<br> #bigimg{float:left;width:400px;height:400px;margin-left:40px;border:1px solid #ccc;display:none;}<br>#showimg{width:100px; 높이:100px;배경:# fff;커서:이동; 위치:절대;경계:1px 단색 #666;불투명도:0.5;필터:알파(불투명도=50);디스플레이:없음;}<br> <br>var $=function(id){return typeof id=="string"?document.getElementById(id):id}<br> var smallimg = $("smallimg");<br>var showimg = $("showimg");//이미지 필터링<br>var bigimg = $("bigimg");<br>var small_url = smallimg.getElementsByTagName( "img")[0].getAttribute("src");<br>var show_half = maxWidth = maxHeight = 0;<br>smallimg.onmouseover = function(){<br> showimg.style.display = "block " ;<br> bigimg.style.display = "inline";<br> show_half = showimg.offsetHeight/2;<br> maxWidth = smallimg.clientWidth - showimg.offsetWidth;<br> maxHeight = smallimg.clientHeight - showimg. ;<br> //위 두 변수는 showimg가 이동할 수 있는 영역을 나타냅니다.<br>};<br>smallimg.onmousemove = function(e){<br> var e=window.event?window.event: e; <br> var num=bigimg.clientWidth/showimg.clientWidth;<br> var Top = e.clientY - smallimg.offsetTop - show_half;<br> var Left = e.clientX - smallimg.offsetLeft - show_half;<br> / /현재 이동 중인 showimg 위치를 가져옵니다. 계산 방법은 마우스 좌표 - 가장 바깥쪽 컨테이너의 좌표 - 상자의 너비(높이)/2 <br> Top = Top<0?0:Top>maxHeight? maxHeight:Top;<br> 왼쪽 = 왼쪽<0?0:Left>maxWidth?maxWidth:Left;<br> showimg.style.top = 위쪽 "px";<br> showimg.style.left = 왼쪽 "px" ;<br> bigimg.style . background = "url(" small_url ") -" 왼쪽*숫자 "px -" 위쪽*숫자 "px no-repeat";<br>};<br>smallimg.onmouseout = function( ){<br> showimg.style.display="none";<br> bigimg.style.Background ="";<br> bigimg.style.display="none"<br>};<br></ 스크립트><br>< /body><br></html><br></p> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
