jQuery-放大镜

Posted 2020-06-24

$(function(){
    var mouseX = 0;        //鼠标移动的位置X
    var mouseY = 0;        //鼠标移动的位置Y
    var maxLeft = 0;    //最右边
    var maxTop = 0;        //最下边
    var markLeft = 0;    //放大镜移动的左部距离
    var markTop = 0;    //放大镜移动的顶部距离
    var perX = 0;    //移动的X百分比
    var perY = 0;    //移动的Y百分比
    var bigLeft = 0;    //大图要移动left的距离
    var bigTop = 0;        //大图要移动top的距离

    //改变放大镜的位置
    function updataMark($mark){
        //通过判断，让小框只能在小图区域中移动        
        if(markLeft<0){
            markLeft = 0;
        }else if(markLeft>maxLeft){
            markLeft = maxLeft;
        }
        
        
        if(markTop<0){
            markTop = 0;
        }else if(markTop>maxTop){
            markTop = maxTop;
        }
        
        //获取放大镜的移动比例，即这个小框在区域中移动的比例
        perX = markLeft/$(".small").outerWidth();
        perY = markTop/$(".small").outerHeight();
        
        bigLeft = -perX*$(".big").outerWidth();
        bigTop = -perY*$(".big").outerHeight();
        
        //设定小框的位置
        $mark.css({"left":markLeft,"top":markTop,"display":"block"});
    }
    
    //改变大图的位置
    function updataBig(){
        $(".big").css({"display":"block","left":bigLeft,"top":bigTop});
    }
    
    //鼠标移出时
    function cancle(){
        $(".big").css({"display":"none"});    
        $(".mark").css({"display":"none"});
    }
    
    //鼠标小图上移动时
    function imgMouseMove(event){
        
        var $this = $(this);
        var $mark = $(this).children(".mark");
          
        //鼠标在小图的位置
        mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;
        mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;
        
        //最大值
        maxLeft =$this.width()- $mark.outerWidth();
        maxTop =$this.height()- $mark.outerHeight();
        markLeft = mouseX;
        markTop = mouseY;
        
        updataMark($mark);
        updataBig();
    }
    
    
    $(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);
})

　　

这个里面主要有二点

1.如何大图跟随"放大镜"的位置，同时移动大图?

其实就是用到一个比例关系，当“放大镜”移动多少比例（是比例，不是具体值），大图也同时用这个比例去乘以大图的宽和高，就可以算出大图该移动多少距离了；

 

2.显示区域和放大镜的关系？

这里的“放大镜”应该和大图的显示区域的比例，应该是大图和小的比例关系一样。比如大图和小图的比例是1:2，那个“放大镜”区域的大小，和显示大图区域的大小比例也应该是1:2，不然“放大镜”罩住的小图区域，和大图的显示区域，所显示的图像信息，不能保持一致。（妙味课堂里讲的那个实例，就是没有保持一至）;