javascript html 鼠标放大镜效果

1、鼠标放大镜效果

鼠标放大镜效果，将鼠标移入到左图片，则可以在其右边看到放大的图片，且鼠标移动滑块的大小即为右图显示图片。实际效果如下图所示：

 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

      #little_image {

        width: 400px;

        height: 400px;

        position: absolute;

        top: 0px;

        left: 0px;

      }

      #image {

        display: block;

        width: 400px;

        height: 400px;

        position: absolute;

      }

      #big_image {

        width: 500px;

        height: 500px;

        border: 1px solid grey;

        overflow: hidden;

        display: none;

        position: absolute;

        top: 0px;

        left: 400px;

      }

      #images {

        display: block;

        width: 1000px;

        height: 1000px;

        position: absolute;

      }

      #slider_block {

        width: 200px;

        height: 200px;

        position: absolute;

       

        border: 1px solid lightgrey;

        cursor: all-scroll;

        display: none;

      }

    </style>

  </head>

  <body>

    <div id="little_image">

      <img src="img/1.png" alt="" id="image"/>

      <div id="slider_block">

      </div>

    </div>

    <div id="big_image">

      <img src="img/31.png" alt="" id="images"/>

    </div>

  </body>

  <script type="text/javascript">

    var littleImage = document.getElementById('little_image');

    var bigImage = document.getElementById('big_image');

    var sliderBlock = document.getElementById('slider_block');

    //为littleImage添加鼠标移入事件

    littleImage.onmousemove = function(event) {

      event = event || window.event;

      sliderBlock.style.display = "block"; //移入鼠标显示sliderBlock

      bigImage.style.display = "inline-block";    //移入鼠标显示bigImage

 

      // 1、限定sliderBlock的活动范围

      var disX = event.clientX - sliderBlock.offsetWidth / 2;      //鼠标点击位置－移动块宽度的1/2

      var disY = event.clientY - sliderBlock.offsetHeight / 2;

     //最大移动位置就是little_image的宽度－移动块的宽度

      var distenceMaxX = littleImage.offsetWidth - sliderBlock.offsetWidth; 

      var distenceMaxY = littleImage.offsetHeight - sliderBlock.offsetHeight;

      if (disX < 0) {

        disX = 0;

      } else if (disX >= distenceMaxX) {

        disX = distenceMaxX

      }

      if (disY < 0) {

        disY = 0;

      } else if (disY >= distenceMaxY) {

        disY = distenceMaxY;

      }

      // 2、通过改变sliderBlock的left和top的指来让sliderBlock随着鼠标移动

      sliderBlock.style.left = disX + "px";

      sliderBlock.style.top = disY + "px";

      // 3、通过计算sliderblock在littleImage的比例，计算bigImage在大图中显示的比例

      var scaleX = disX / distenceMaxX;  

      var scaleY = disY / distenceMaxY;

      var images = document.getElementById('images');

      bigImage.scrollLeft = (images.offsetWidth - bigImage.offsetWidth) * scaleX;

      bigImage.scrollTop = (images.offsetHeight - bigImage.offsetHeight) * scaleY;

    }

     //添加鼠标移出事件

    littleImage.onmouseleave = function() {

      sliderBlock.style.display = 'none';   //  sliderBlock隐藏

      bigImage.style.display = 'none';      //  bigImage隐藏

    }

  </script>

</html>

 

附：offset ｜ client ｜ scroll 关系图