집 > 기사 > 웹 프론트엔드 > 그림돋보기 플러그인 예제의 JS 구현에 대한 자세한 설명

그림돋보기 플러그인 예제의 JS 구현에 대한 자세한 설명

小云云원래의: 2018-01-19 14:18:491782검색

이 글은 주로 JS를 사용하여 그림 돋보기 플러그인을 구현하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

서문

우리 모두는 다양한 전자상거래 사이트를 자주 방문하며, 제품의 세부 사항을 자세히 설명하려면 돋보기를 사용해야 합니다. 오늘은 그림 돋보기를 만들어 보겠습니다. 플러그인, 사진이 어떻게 확대되는지 살펴볼까요...

먼저 최종 효과를 달성하면 어떤지 살펴보겠습니다

효과를 읽어본 후, 어떤 것이 있나요? 아이디어가 없다면 어떻게 구현하는지 살펴보겠습니다. ~

1 구현 아이디어

① 포인팅 후 확대 효과를 얻으려면 PS 3개를 만들어야 하는데, 하나는 배치하는 데 사용됩니다. 원본 이미지, 다른 하나는 확대/축소 효과의 p를 배치하는 데 사용되며 마지막 이미지는 마우스를 위로 향할 때입니다. 마지막으로 p의 일부를 확대해야 합니다(이 p를 대체하기 위해 p 태그를 사용합니다).

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

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

2 구체적인 구현 단계

먼저 세 개의 p를 빌드해 보겠습니다.

<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>

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

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

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

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

마우스 아웃 이벤트:

 img1.onmouseout = function () { 
       //鼠标离开 
       img2.style.display = &#39;none&#39;; 
       mousebg.style.display = &#39;none&#39;; 
     }

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

var _event = event||window.event;//兼容性处理 
var mouseX = _event.clientX - img1.offsetLeft; 
 //计算鼠标相对与小图的位置 
var mouseY = _event.clientY - img1.offsetTop;

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

즉, 마우스가 그림의 위쪽, 아래쪽, 왼쪽 또는 오른쪽에서 방금 들어왔을 때 이 거리는 마우스 손가락의 p 폭의 2배 1/2로 나누면 확대 효과의 p가 표시되고 움직이지 않습니다.

//特殊情况处理，分别靠近四条边的时候 
 if(mouseX<mousebg.offsetWidth/2){ 
  mouseX = mousebg.offsetWidth/2; 
   } 
 if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ 
  mouseX = img1.offsetWidth-mousebg.offsetWidth/2; 
   } 
 if(mouseY<mousebg.offsetHeight/2){ 
  mouseY = mousebg.offsetHeight/2; 
 } 
 if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ 
  mouseY = img1.offsetHeight-mousebg.offsetHeight/2; 
 }

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

 //计算大图的显示范围 
 img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; 
 img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; 
 //使鼠标在白块的中间 
mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; 
mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px";

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

그림돋보기 플러그인 예제의 JS 구현에 대한 자세한 설명

관련 기사