자바 스크립트 이미지 - 마우스를 가져가 줌 팝업창

Question

나는 이것을 처음부터 만들려고했다.

제 생각은 팝업 배경을 덮을 이미지의 더 큰 버전으로 설정하는 것입니다. 그런 다음 배경 이미지를 단일 스프라이트 이미지를 구성하는 이미지 스 니펫 집합과 같이 이동합니다.

내가 누락 된 것인지 확실하지 않습니다. 지금이 데모에서는 Z- 인덱스를 사용하여 나머지 이미지를 숨기려고 노력하고 있지만 작동하지 않는 것 같습니다.

110 줄의 코드가 있으므로 잘하면 데모 링크를 게시하고 있습니다.

Working demo

이것은

이것은 마우스 오버 태그

당신이이 좌표 x, 이미지 위에 마우스를 가져 가면 생각은 내부에있는 MouseMove 이벤트 태그 내부에 불구하고 기본 드라이버 코드/y가 업데이트됩니다 (첫 x 째 단계에서 x 좌표를 얻으려는 첫 x 째 단계). 그런 다음 이미지가 한 x 추가되고, 첨부 된 이미지는 절대 위치로 설정되고, 일부 변수가 작성됩니다. 이제 좌표는 이동중인 이미지의 중심을 나타내며, 작은 이미지 위에 커서를 올려 놓으면 매핑됩니다.

on mouse out, 재설정.

<script> 
$("#coordinates").empty(); 
     $("#coordinates").append('x: ' + event.clientX + ' ' + ',' + 'y: ' + event.clientY + ' '); 

     // append image 
     if(imageAppended == "none") { 
      $("#zoomed-in").append('<img id="image" src="nicephoto.jpg" width="600px" height="auto" />'); 
      imageAppended = "yes"; 
     } 
     // set background image 
     $("#image").css({ 
      'position' : 'absolute' 
     }); 

     // hover image coordinates 
     var imagePosition  = $("#image-container").position(); 
      imagePositionTop = imagePosition.top, 
      imagePositionLeft = imagePosition.left, 
      imageWidthOffset = (($("#image").width()) /2), // move image by center 
      imageHeightOffset = (($("#image").height()) /2); // move image by center 

     // move the image 
     $("#image").css({ 
      'top' : (event.clientY)-imagePositionTop-imageHeightOffset, 
      'left' : (event.clientX)-imagePositionLeft-imageWidthOffset 
     }); 
</script> 

Answer 1

은 내가 당신을 따르하지만 #zoomed-in에 overflow:hidden을 설정하려고 모르겠어요.