2019-06-19 放大镜效果

作者: DreamNeverDie | 来源:发表于2019-06-19 20:02 被阅读0次

2019-06-19 放大镜效果
iOS放大镜效果实现-ASMagnifierManger
放大镜效果
放大镜效果
放大镜效果
放大镜效果
放大镜效果
放大镜效果
十.放大镜效果的demo
js 放大镜效果


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    .bk-linear {background:-webkit-linear-gradient(45deg, red 0 ,blue 50% ,yellow 100%);}
    .div1,.div2 {float:left; width:400px;height:400px;overflow:hidden;position:relative;}
    .div2 {margin-left:30px;display:none;}
    .mask {width:200px;height:200px;background:yellow;opacity:0.3;position:absolute;left:0; top:0;display:none;}
    .cover {position:absolute;left:0;top:0; z-index:9; width:100%;height:100%;}
    .div2 span {position:absolute;left:0;top:0;width:1000px;height:1000px;}
    </style>
  </head>
  <body>
    <div class="div1 bk-linear">
      <div class="mask"></div>
      <div class="cover"></div>
    </div>
    <div class="div2">
      <span class="bk-linear"></span>
    </div>
    <script>
    let div1=document.querySelector('.div1');
    let mask=document.querySelector('.mask');
    let div2=document.querySelector('.div2');
    let img=document.querySelector('.div2 span');

    div1.onmouseover=function (){
      mask.style.display='block';
      div2.style.display='block';
    };
    div1.onmouseout=function (){
      mask.style.display='none';
      div2.style.display='none';
    };

    div1.onmousemove=function (ev){
      let left=ev.offsetX-mask.offsetWidth/2;
      let top=ev.offsetY-mask.offsetHeight/2;

      if(left<0){
        left=0;
      }
      if(left>div1.offsetWidth-mask.offsetWidth){
        left=div1.offsetWidth-mask.offsetWidth;
      }

      if(top<0){
        top=0;
      }
      if(top>div1.offsetHeight-mask.offsetHeight){
        top=div1.offsetHeight-mask.offsetHeight;
      }

      mask.style.left=left+'px';
      mask.style.top=top+'px';

      // mask.style.left=ev.pageX-div1.offsetLeft-mask.offsetWidth/2+'px';
      // mask.style.top=ev.pageY-div1.offsetTop-mask.offsetHeight/2+'px';

      //蓝=红*黑2/黑1
      let x=left*(img.offsetWidth-div2.offsetWidth)/(div1.offsetWidth-mask.offsetWidth);
      let y=top*(img.offsetHeight-div2.offsetHeight)/(div1.offsetHeight-mask.offsetHeight);

      img.style.left=-x+'px';
      img.style.top=-y+'px';
    };
    </script>
  </body>
</html>