자바 스크립트 스크롤 이미지 가장자리 감지

Question

현재 내가 만들고자하는 작은 이미지 줌/스크롤러 스크립트를 실험하고 있습니다. 예, 거기에 플러그인이 있지만 경량 버전 용으로 개발하고 있습니다. 학습. 지금 가지고있는 주된 문제는 내 이미지를 내 이미지의 너비와 높이로만 스크롤하는 방법을 확신 할 수 없다는 것입니다. 사용자가 이미지의 너비 또는 높이로 이동하여 이미지가 div 밖으로 스크롤되는 것을 막을 때 이미지가 스크롤되지 않도록 스크립트를 설정하고 싶습니다. 아래는 필자의 대본에 대한 바이올린이며, 올바른 방향으로 움직이는 데 도움이되는 제안이나 요령은 많은 도움이 될 것입니다. click here to go to fiddle

Answer 1

나는 오래 전에이 중 하나를 만들었습니다.

원칙적으로 세 가지 이벤트 (mousedown, mouseup 및 mousemove)를 듣고 있습니다.

먼저 div을 사용하고 background-image이 div 인 이미지를 설정하는 것이 가장 좋습니다. 이렇게하면 background-position을 사용하여 div 내부에서 이미지를 이동할 수 있습니다. 우리는 이것을 div#container이라고 부를 것입니다.

mousedown에서 이미지의 배경 위치 좌표를 기록합니다. 페이지로드시 이들은 0 0이됩니다 (다른 것을 말하지 않는 한, 사용자는 그렇지 않은 것으로 가정합니다). mousedown 이벤트가 발생하면 이는 본질적으로 드래그 작업의 시작이므로 draggingStarted 변수를 설정하는 것이 좋습니다.

mousemove에서 draggingStarted이 맞는지 확인해야합니다. 그럴 경우 마우스 커서가 움직 인 상대 거리를 계산하고 그에 따라 배경 이미지 좌표를 변경하십시오.

mouseup에서 draggingStarted 변수를 false로 설정하려고합니다. 이는 mousemove 이벤트가 발생하면 이미지 위치가 고정되도록 유지하기위한 것입니다.

지금 묻는 문제는 지금까지 주어진 해결책이 배경 위치 좌표가 이미지의 오버 슛을 허용하므로 부분적으로 공백이 생길 수 있습니다. #container. 의 해결책이 문제는 이미지의 크기를 기록한 다음 배경 이미지 이동 거리 (mousemove 함수)를 계산할 때 새 배경 이미지 좌표가 외부에 있는지 확인하십시오. 이미지의 범위. 그들이 있다면, 그것을 허용하지 마십시오!