JQuery 돋보기 효과 구현(코드 및 주석)

1.css 코드*{margin: 0;padding: 0;box-sizing:border-box;}
section { position: relative; width: 430px; }
.top { position: relative; width: 430px; height: 350px;; }
.top img { width: 100%; height: 100%; }
.top .mask { position: absolute; width: 125px; height: 125px; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; display: none; }
.bottom img { width: 82px; height: 60px; border: 1px solid transparent; }
.bottom img:nth-child(1) { border-color: black; }
.right {position: absolute;left: 100%;top: 0;width: 430px;height: 430px;background-image: URL(./ims/lmt.jpeg);/* 작은 블록이 선택한 부분을 전체 상자로 확대하기 때문에 확대 배수는 430/125/////따라서: 배경 그림의 크기: 430*430/125*/background-size: 1479.2px 1204px;display: none;}
JQuery 코드://작은 그림을 선택하고 위쪽 큰 그림의 src//작은 그림을 선택한 색인을 기록합니다 var eleIndex = 0; $(’.bottom img’).mouseenter(function() {//선택한 그림에서 eleIndex를 수정하기 전에 eleIndex는 실제적으로 마지막으로 선택한 그림의 색인을 나타냅니다//마지막으로 선택한 작은 그림의 경계선 색을 투명색으로 변경합니다 ('. b o t t o m i m g: e q ('.bottom img: eq ('.bottomimg: eq ({eleIndex})).css('border-color','transparent'); console.log(eleIndex); // eleIndex = $(this).index(); // src var src = $(this).attr('src'); $('.top img').attr('src', src); // $('.right img').attr('src',src)； $('.right').css('background-image'，url(${src}) ); // elelIndex ， ； $( .bottom img:eq(${eleIndex})`).css(‘border-color’,‘black’); })
//마스크 레이어, 오른쪽에 있는 큰 그림의 숨겨진 작업 $('.top').mouseenter(function(){ $(’.mask’).add(’.right’).show();//$(’.right’).show(); }) $(’.top’).mouseleave(function(){ $(’.mask’).add(’.right’).hide();//$(’.right’).hide(); })//마우스 이벤트를 수신하면 mask가 $('.top') 이동합니다.mousemove(function(event) {//jquery 바인딩 이벤트에서 이벤트 대상은 jquery로 봉인된 대상이며,.original Event를 통해 원본 JS DOM Event 대상//을 획득하여 이벤트 대상의 좌표점//페이지X: 마우스 포인트 거리 브라우저 가시 영역의 왼쪽 경계 거리//offset ().left: 브라우저 가시 영역 왼쪽 경계 거리 var left = event.originalEvent.pageX - ( t h i s ) . o f f s e t ( ) . l e f t − 62.5 ; v a r t o p = e v e n t . o r i g i n a l E v e n t . p a g e Y − (this).offset().left - 62.5; var top = event.originalEvent.pageY - (this).offset().left−62.5;vartop=event.originalEvent.pageY−(this).offset().top - 62.5;
//임계 문제 주의//수치 범위가 있음[0-430-125]if(left<0)left=0;if(left > 305) left =305; if(top < 0) top = 0 ; if(top > 225) top = 225;
$(’.mask’).css({ top:top , left:left }) ( ′ . r i g h t ′ ) . c s s ( ′ b a c k g r o u n d − p o s i t i o n ′ , ‘ ('.right').css('background-position',` (′.right′).css(′background−position′,‘{-1left3.44}px ${-1top3.44}px`); }) (위 코드는 참고만 가능하며 복사 붙여넣기를 추천하지 않습니다!!!!!)