Google 지도 스타일 스크롤 사용자?

Google 지도 스타일 스크롤 사용자?

Google 지도와 같은 방식으로 이미지를 스크롤할 수 있는 JavaScript 플러그인( 가급적이면 jQuery)을 찾고 있습니다.

이미지를 드래그할 수 있도록 만들 수 있지만 상위 눈금이 있더라도 드래그하는 동안 전체 이미지를 봅니다.overflow:hidden.

어떤 도움이라도 주시면 대단히 감사하겠습니다!

(지금은 죽은 이 파티에 너무 늦었지만, 이봐, 검색을 통해 이 페이지를 찾았어 그래서...)

나는 mooware에서 제안한 Scrollview 플러그인이 작동하지 않았습니다.

그러나 Dragscrollable은 다음과 같습니다: http://plugins.jquery.com/project/Dragscrollable

시연해 보십시오.

파티에 조금 늦을지도 모르지만, 저도 같은 것을 찾고 있었어요.제가 우연히 발견한 것은 jquery에 대한 스크롤 뷰입니다. 완벽하게 작동하고 오버플로우된 div에 대한 드래그 투 스크롤과 같은 구글 맵을 정확하게 수행합니다.

Google 지도 이미지 커터를 확인하십시오. 모든 이미지 또는 디지털 사진을 촬영하여 Google 지도에 표시되는 타일로 자를 수 있습니다.당신이 필요한 일을 빨리 할 수 있는 방법이 될 수도...

당신은 구글 지도 API를 사용할 수 있습니다...사용자 지정 이미지와 함께 사용할 수 있습니다.그리고 컨트롤이 표시되는지 여부를 선택할 수 있습니다.

편집: 이 방법에 대한 적절한 튜토리얼을 찾았습니다.http://mapki.com/wiki/Add_Your_Own_Custom_Map

기본 기술에 대한 좋은 설명을 위해 Practical Programmer's의 책 Practical Ajax의 4장(내 기억이 정확하다면)을 살펴봅니다.

이미지 슬라이싱 및 다이싱이 어떻게 작동하는지 커버 아래에서 확인할 수 있습니다.그리고 줌.

이것은 자바스크립트와 관련이 없고 CSS 코딩과 더 관련이 있습니다.

HTML과 CSS로만 몇 가지 실험을 해보고 이미지를 제대로 클리핑한 다음 Javascript를 추가하여 이미지를 이동합니다.

HTML로 클리핑할 수 없거나 Javascript로 이동할 수 없는 경우 디버깅할 수 있는 가장 간단한 문제 데모를 여기에 게시합니다.

우리가 어둠 속에서 촬영하는 코드가 없다면요.

Google 지도는 사용자가 다른 방향으로 이동할 때 동적으로 로드되는 블록으로 분할된 이미지를 사용합니다.Google 지도 이미지 커터 Paul Dixon이 언급한 것은 당신이 이를 위해 원하는 도구입니다.

이미지를 블록으로 분할하는 추가적인 복잡성 대신 하나의 큰 이미지를 이동하려면 CSS 오버플로 속성을 사용하는 대신 클립 속성을 사용해야 합니다.이것은 생각해 볼 가치가 있는 모든 브라우저에서 지원됩니다. 제 기억이 맞다면 IE4까지요.

한 가지 주의할 점: CSS2.1 사양은 올바른 값을 쉼표로 구분한 예제를 보여줍니다.그러나 IE6에서는 이 기능을 지원하지 않습니다(IE7도 지원하지 않을 수 있습니다).그러나 다른 모든 브라우저는 쉼표 없이 버전을 인식합니다.그래서 대신에

clip: rect(5px, 40px, 45px, 5px);

사용해야 합니다.

clip: rect(5px 40px 45px 5px);

호환성을 위하여

<div> 컨테이너가 <img> 요소 주위의 상대적 위치로 설정되어야 하며, 이를 절대 위치로 설정해야 합니다.

따라서 기본 기술은 사용자가 끌 때 위쪽 및 왼쪽 값을 업데이트하고 정의된 보기 너비 및 높이와 함께 사용하여 적절한 rect() 문자열을 만들고 <img> 요소의 스타일 속성의 위쪽, 왼쪽 및 클립 속성을 업데이트하는 것입니다.

내가 한 것처럼 하지 말고 rect() 문자열의 값 뒤에 "px"를 빼세요.왜 그것이 작동하지 않는지 깨닫는 데 오랜 시간이 걸렸습니다 :-)

언급URL : https://stackoverflow.com/questions/66649/google-maps-style-scrolling-anyone