JavaScript 돋보기 움직이는 렌즈 효과 code_javascript 기술

돋보기는 달성하기 어려운 효과는 아니지만, 정밀한 수치 계산이 필요하기 때문에 더 번거롭습니다. 앞으로는 JavaScript 돋보기 시리즈에 대해 매번 이야기하면서 글을 쓸 것입니다.
이번에는 썸네일에서 렌즈를 움직이는 방법을 먼저 배워보겠습니다. (DEMO입니다.)

DOM 썸네일과 렌즈로 구성된 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

이미지를 썸네일 컨테이너에 배치하고 렌즈 노드는 썸네일 컨테이너를 상대 위치 참조로 사용하여 mousemove 이벤트가 트리거될 때 렌즈의 위치를 ​​수정합니다. 해결 방법은 썸네일 컨테이너에서 렌즈의 왼쪽 상단 모서리 위치를 계산하는 것입니다. JavaScript 코드는

코드를 복사합니다. 🎜> 코드는 다음과 같습니다: /**

* 확대 대상 요소에서 렌즈 위치 가져오기

* @param ev 트리거 이벤트
* @param 엄지 썸네일 개체
* @param glass 렌즈 개체
* @return x: 확대 대상 요소에서 렌즈의 수평 위치, y: 확대 대상 요소에서 렌즈의 수직 위치
*/
function getGlassOffset(ev, Thumb, glass) {
var offset = {
left:0,
top:0
};

// offset
var ThumbOffset = getCumulativeOffset(thumb)
//마우스 위치 페이지
var mousePoint = getMousePoint(ev);
//렌즈의 실제 크기
var glassSize = getSize(glass)
// 썸네일의 실제 크기
var ThumbSize = getSize(thumb);

// 커서 수평 위치
var CursorX = mousePoint.x - ThumbOffset.left
/ / 렌즈 측면 오프셋
offset.left =cursorX - glassSize.width / 2;
if(offset.left < 0) {
offset.left = 0
} else if( offset.left > ThumbSize.width - glassSize.width) {
offset .left = ThumbSize.width - glassSize.width;
}

// 커서 수직 위치
var 커서Y = mousePoint.y - ThumbOffset.top
// 렌즈 수직 오프셋
offset.top =cursorY - glassSize.height / 2;
if(offset.top < 0) {
offset .top = 0
} else if(offset.top > ThumbSize.height - glassSize.height) {
offset.top = ThumbSize.height - glassSize.height;

반환 오프셋
}


썸네일 컨테이너 내 렌즈 왼쪽 상단 = 마우스 위치 - 썸네일 왼쪽 상단 위치 - 렌즈 크기의 절반
렌즈가 컨테이너 밖에 있는 경우 렌즈를 옆으로 이동하세요. 모든 코드는
DEMO

에서 살펴보시기 바랍니다. (지난 글에서 JS를 통해 마우스 위치를 알아내려고 쓴 이유를 아시나요?)

수업 후 생각을 위한 질문을 남겨주세요. , 렌즈에 테두리가 있는 경우 프레임이 렌즈 움직임의 정확성에 영향을 미치지 않도록 하는 방법은 무엇입니까?