用js实现放大镜效果

用js实现放大镜效果

一、实现办法

准备两个大div，第一个div(类名：small)放本来大小的图片，另一个div(类名：large)显示放大的图片。在第一个div里面放一个小的div(类名：len)，此div用来选择图片需要放大的部位。刚开始的时候，large盒子和 len盒子都是隐藏起来的，当鼠标移入图片时，将large盒子和 len盒子显示出来， len盒子跟随鼠标的移动改变位置，在将变化赋值给large盒子来改变。

二、具体实现

html 样式：

 <div class="small">
    <img src="images/xx.jpg" alt="">
    <div class="len"></div>
  </div>
  <div class="large">
    <img src="images/xx.jpg" alt="">
  </div>

css 样式：

   * {
   
      margin: 0;
      height