그림 돋보기 효과의 JS 구현 사용 사례

이번에는 JS의 그림 돋보기 효과 구현 사례를 가져오겠습니다 JS의 그림 돋보기 효과 구현을 위한 주의사항은 무엇인가요? .

이전 단어

우리 모두는 다양한 전자 상거래 웹 사이트를 자주 방문하며 제품의 세부 사항을 돋보기를 사용해야합니다. 이는 모든 사람에게 익숙할 것입니다. 오늘은 사진이 어떻게 확대되는지 확인하기 위한 사진 돋보기 플러그인을 만들어 보겠습니다. ..

먼저 달성하면 최종 효과가 무엇인지 살펴보겠습니다

효과를 읽어보신 후, 어떤 아이디어가 있으신가요? 그렇지 않다면 어떻게 달성하는지 살펴보겠습니다~

1 구현 아이디어

① 포인팅 후 확대 효과를 얻으려면 p 3개를 만들어야 하는데, 하나는 원본 이미지를 배치하는 데 사용되고, 다른 하나는 확대 효과를 위해 p를 배치하는 데 사용되고, 마지막은 p의 일부입니다. 마우스를 위로 향하게 한 후 확대해야 합니다(대신 이 p p 태그를 사용합니다).

② 확대 비율을 결정합니다. 가장 중요한 점은 마우스 손가락의 p와 확대 효과의 p가 원본 이미지와 확대된 이미지의 비율과 같아야 한다는 것입니다.

③ 마우스 오버 시 확대 효과가 나타납니다.

2 구체적인 구현 단계

먼저 세 개의 p를 만들어 봅시다.

rreee

HTML 코드 부분이 완성되었습니다. 다음으로 JS를 사용하여 기능을 구현합니다.

원본 이미지에 마우스 입력, 마우스 이동, 마우스 이동 아웃이라는 세 가지 이벤트를 추가합니다.

원본 이미지에 마우스를 이동시키면 마우스가 위로 향하고 있을 때의 p와 확대 효과의 p가 동시에 표시됩니다.

rreee

마우스 아웃 이벤트:

<p id="wrapper"> 
     <!--小图-->
    <p id="img_min"> 
       <!--图片-->
       <img src="img/11.png" alt="min"> 
       <!--跟随鼠标的白块-->
       <p id="mousebg"></p> 
     </p> 
   <!--大图-->
     <p id="img_max">
       <img id="img2_img" src="img/11.png" alt="max">
     </p> 
   </p>

요점은 마우스가 움직일 때 p 태그의 위치와 원본 이미지를 기준으로 큰 이미지에서 확대해야 할 부분이 표시된다는 점입니다.

rreee

위치 분석을 수행할 때 고려해야 할 네 가지 중요한 상황이 있습니다.

즉, 그림의 위, 아래, 왼쪽, 오른쪽에서 그냥 마우스가 들어왔을 때, 그 거리가 마우스 손가락의 p 폭의 절반 이하이면 확대된 p가 표시되고 움직이지 않습니다.

rreee

마지막으로 큰 이미지의 표시 범위를 계산합니다.

img1.onmouseover = function () { 
       //鼠标进入 
       img2.style.display = 'block'; 
       mousebg.style.display = 'block'; 
      
     }

이런 식으로 JS를 사용하여 그림 돋보기 플러그인을 구현합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 그림 돋보기 효과의 JS 구현 사용 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!