>  기사  >  웹 프론트엔드  >  자바스크립트 돋보기 효과_javascript 기술의 간단한 구현

자바스크립트 돋보기 효과_javascript 기술의 간단한 구현

WBOY
WBOY원래의
2016-05-16 17:10:09931검색

이 효과는 어렵지 않습니다. 위치와 비율을 설정하는 것이 핵심입니다.

마우스 위치 캡처, 마우스 위치 영역 결정 및 onmouseover 이벤트, onmousemove 이벤트, onmouseout 이벤트

표시되는 큰 이미지의 비율을 설정합니다. 작은 이미지에 표시되는 잘라낸 이미지의 비율은 정확해야 하며 가급적 2배 또는 4배가 좋습니다.

주로 너비에 주의하세요. 제가 여기 가지고 있는 이미지 m.jpg는 1440X900입니다....

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





돋보기 효과