>  기사  >  웹 프론트엔드  >  jquery 플러그인은 마우스가 이미지 오른쪽 위로 지나갈 때 큰 이미지를 표시하는 효과를 구현합니다(타오바오와 유사)_jquery

jquery 플러그인은 마우스가 이미지 오른쪽 위로 지나갈 때 큰 이미지를 표시하는 효과를 구현합니다(타오바오와 유사)_jquery

WBOY
WBOY원래의
2016-05-16 17:42:24988검색

이 플러그인의 이름은 climberzoom 입니다. 웹사이트 주소는 http://www.elevateweb.co.uk/image-zoom 입니다. github의 프로젝트 홈페이지는 https://github.com/elevateweb/elevatezoom 입니다. 이 웹사이트에서 다운로드하는 것이 좋습니다. 속도는 상대적으로 빠릅니다.

이 효과를 얻으려면 마우스가 그 위로 지나갈 때 표시할 작은 그림과 큰 그림 두 장을 준비해야 합니다. 그런 다음 img 태그에 data-zoom-image 속성을 추가하기만 하면 됩니다. 이 값은 큰 이미지의 주소입니다. 마지막으로 javascript에서 이미지를 선택하고 elevateZoom()을 호출합니다.

아래 예가 나와 있습니다(이 예는 github에서 다운로드한 코드에 포함되어 있습니다).

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


🎜> jQuery elevateZoom 데모



기본 줌 예시

;img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>


>온라인에서 더 많은 예시 보기 http://www.elevateweb.co.uk/image-zoom/examples