放大镜

作者: 一枚奋斗青年 | 来源:发表于2016-08-02 17:54 被阅读23次

iOS放大镜效果实现-ASMagnifierManger
2018-12-02
放大镜
2018-06-09
涓涓说（20220522）
放大镜
自己看自己，总会带着放大镜
放大镜的写法
父母的爱情小故事1
TableView 索引放大镜

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#min_wrap{
position:absolute;
width:350px;
border:1px solid purple;
}
#max_wrap{
position:absolute;
left:370px;
width:400px;
height:400px;
border:1px solid purple;
overflow:hidden;
display:none;

  }
  #max_wrap{
      position:absolute;
  }
  #slider{
    position:absolute;
    left:0;
    top:0;
    width:175px;
    height:175px;
    background:rgba(255,255,0,.3);
    cursor:pointer;
    display:none;
  }

</style>

</head>
<body>
<div id="min_wrap">
<img src="img/21.jpg" alt="">
<div id="slider"></div>
</div>
<div id="max_wrap">
<img src="img/20.jpg" alt="">
</div>

</body>
<script>
function e(){
//获取元素
var minWrap = document.getElementById('min_wrap');
var maxWrap = document.getElementById('max_wrap');
var slider = document.getElementById('slider');
var maxImg = maxWrap.children[0];

       //鼠标移入事件
       minWrap.onmousemove = function(event){
        //让slider和maxWrap显示出来
        slider.style.display = "block";
        maxWrap.style.display = "block";

        //处理event
        var event = event || window.event;

        //获取鼠标坐标
        var disX = event.clientX - minWrap.offsetLeft;
        var disY = event.clientY - minWrap.offsetTop;

        /*
         对象在可视去内的值 - 小图片容器的偏移量 = 当前鼠标的坐标值

        */

        //将鼠标点处于移动滑块的正中间
       var x = disX - (slider.offsetWidth / 2);
       var y = disY - (slider.offsetHeight / 2);

       /*
        当前鼠标坐标点 - (移动滑块)

       */

        //获取移动滑块的移动范围
        var maxWidth = minWrap.clientWidth - slider.offsetWidth;

        var maxHeight = minWrap.clientHeight - slider.offsetHeight;

        //判断限定最大宽度和最大高度
        if (x>=maxWidth){

            x=maxWidth

            }else if (x<=0) {
                x=0;
            }
        if (y>=maxHeight){

            y=maxHeight

            }else if(y<=0){
                y=0;
            }


        slider.style.left = x + "px";
        slider.style.top = y + "px";

        // 偏移量的比例
        var scaleX = x / maxWidth;
        var scaleY = y / maxHeight;

        /*
          鼠标坐标点在移动滑块中的位置 / 最大宽度  = 偏移量的比例

        */

        maxWrap.scrollLeft = scaleX * (maxImg.offsetWidth - maxWrap.clientWidth);
        maxWrap.scrollTop = scaleY * (maxImg.offsetHeight - maxWrap.clientHeight);

        /*
        偏移量的比例 * (大图片的实际宽高 - 大图片容器的可见宽高) =
        具体的偏移量.
        */

       }
     //鼠标移出事件
       minWrap.onmouseleave = function(){
        //让slider和maxWrap隐藏
        slider.style.display = "none";
        maxWrap.style.display = "none";
       }


    }
   e();

</script>

</html>