JS图片放大镜

小白入门教程，图片放大镜效果，真是手把手教学了啊（里面的图片是由 苏宁官网 拿的，做的gif图是用 imgPlay 手机软件）

首先呢，当然是从html开始啦

做放大镜，就要先考虑上下结构，上面部分显示的是原始图片，下面部分要显示的是你要选择查看的图片，如图所示

html结构如下：

<div class="imgzoom"> 最外层容器
    <div class="imgzoom-main">  上面部分的结构
      <img class="zoomNormal" src="zoomimg1.jpg" alt="大图片">
    div>
    <div class="imgzoom-list">  下面部分的结构
      <div class="imgzoom-list-main">
        <ul>
          <li class="smallImg current">
            <img src="zoomimg1small.jpg" alt="第一张小图片">
          li>
          <li>
            <img src="zoomimg2small.jpg" alt="第二张小图片">
          li>
          <li>
            <img src="zoomimg3small.jpg" alt="第三张小图片">
          li>
          <li>
            <img src="zoomimg4small.jpg" alt="第四张小图片">
          li>
          <li>
            <img src="zoomimg5small.jpg" alt="第五张小图片">
          li>
        ul>
      div>
    div>
  div>

css就直接说说吧

1. 最外层容器的宽高设置
2. 上部分结构的宽高设置
   
3. 下部分结构宽高设置
   
   

---

既然要放大图片，肯定还需要个弹出层结构，html增加以下代码：

<div class="imgzoom-pop">
  <img class="zoombig" src="zoomimg1.jpg" alt="放大图片的地方">
div>

看看效果图先吧

css：（为了演示这里的弹出层暂时是display: block;之后一开始会设置回none）

1. 绝对定位在上部分结构的右边
   
2. 设置图片的宽高

---

要放大图片，可是你要放大哪一个部分呢？这就需要一个需要放大的区域的div了，这里就称为命中区域imgzoom-shot吧（自称的(°_°)）

在html增加一个命中区域在上部分结构，代码代码：

<div class="imgzoom-shot">div>

其实就真的一个div。。。
来看看css吧：

1. 设置其宽高，绝对定位在左上角先（记得在其父元素补上定位）
   

效果图：

---

接下来就要开始JS的讲解啦

在开始之前记得把前面的display: none; opacity: 0;哦

1. 最开始是简单的鼠标移入移出事件，这个简单不多说
   
   

---

鼠标移动的事件才是最关键的

1. 当鼠标放上去的时候，imgzoom-shot应该是跟着鼠标移动才对，这样才能实现鼠标放在哪就放大哪个区域，所以要先获取到鼠标的位置
   
   e.clientX，document.body.scrollLeft这些不懂的去看看JS高级程序设计320页370页（特别注意那个offsetLeft），也可以百度一下哈
   为什么要用document.body.scrollLeft || document....这个呢？因为你的页面可能有滚动条，所以要用客户区坐标+滚动信息，这时你可以console.log一下，就有鼠标位置出来了

2. 获取完鼠标位置之后，然后需要获取上部分结构距离浏览器左上角的距离（反正能获取到左上角的距离就行，因为你的放大镜不可能贴着浏览器边边角角用吧，可能放在下面，可能放在中间，都有可能）
   因为imgzoom-shot是绝对定位的，这样才能随意控制它定位的位置，用mouseX-offsetLeft就知道imgzoom-shot定位在哪里
   
   
   

看出有什么问题了没有？就是鼠标一直拖动着imgzoom-shot左上角移动，而且imgzoom-shot还可以超出边界，现在就来解决这两个问题吧！！！！

1. 将鼠标对应imgzoom-shot中心，只要再减去imgzoom-shot一半的宽高
   
2. 计算边界范围，不允许超出边界
   先判断左上距离，这个比较容易
   如果偏移量小于0，重置为0
   
   再判断右下距离
   算出最大偏移距离
   
   
   看看动图先吧，现在是这样的效果
   
   命中区域就到此啦

---

要怎么知道命中区域在哪里，就放大哪部分呢，接着往下看吧

图片放大的比例（也就是距离左边left的比例）：命中区域大小占据整个图片剩余的大小，计算出left的比例
这话怎么理解呢？
放大的图片是绝对定位的，命中区域向右移动，放大的图片也一样是向右移动，这样才能对应放大的区域，但是左右两边大小不一样，命中区域移动20px的距离，难道放大的图片也移动20px吗？很显然不是，所以就需要一个比例
命中区域移动 20px，相应的放大的图片要移动 20px * 比例


来看看效果

哈哈哈，没啦，放大镜就这样做出来啦，好好学习天天向上