107

原生JS实现图片放大镜插件 - 一个柠檬

 6 years ago
source link: http://www.cnblogs.com/1996zy/p/7788868.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

  前  言

　　我们大家经常逛各种电商类的网站，商品的细节就需要用到放大镜，这个大家一定不陌生，今天我们就做一个图片放大镜的插件，来看看图片是如何被放大的……

先看一下我们要是实现的最终效果是怎么样的    ↓      

1176850-20171105201511560-709352762.png

看完效果，大家有思路了吗，没有的话，我们一起来看一下是如何实现的~

1实现思路

① 要实现指上后放大的效果，需要做三个div，一个用来放原图，另一个用来放放大效果的div，最后一个是鼠标指上后需要放大部分的div（这个div我们用p标签来代替）。

② 确定放大比例，最重要的一点，鼠标指上的div与放大效果的div，和原图与放大图的比例要相等。

③ 将鼠标指上后的放大效果显示出来。

2具体实现步骤

 首先，我们先来建三个div。

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

我们HTML代码部分已经全部完成，接下来，我们用JS来实现功能：

给原图添加三个事件，分别是，鼠标进入，鼠标移动，鼠标移出。

当鼠标移入原图时，鼠标指上时的div和放大效果的div同时显示。

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

鼠标移出事件：

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

重点是当鼠标移动时，根据p标签与原图的位置，来显示大图需要放大的部分。

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

在做位置分析时，需要考虑四种临界情况：

就是当鼠标从图片的上、下、左、右刚刚进入时，并且这个距离小于鼠标指上的div宽度的二分之一时，放大效果的div显示出来，并不移动。

              //特殊情况处理，分别靠近四条边的时候 
              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实现图片放大镜的插件就全部完成了~ 

如果有任何疑问，欢迎大家留言指正~


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK