放大镜

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

    <!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>

    相关文章

      网友评论

          本文标题:放大镜

          本文链接:https://www.haomeiwen.com/subject/vrzfsttx.html