用jQuery实现放大镜的功能

用jQuery实现放大镜的功能

1. 鼠标经过小盒子让大盒子和遮罩层显示与隐藏
2. 求出鼠标在盒子里面的位置
3. 让鼠标在遮罩层的中间位置
4. 遮罩层能移动的最大距离
5. 限制遮罩层上下左右的位置
6. 赋值给遮罩层
7. 求出大图移动距离
8. 给大图的赋值

 * {
        margin: 0;
        padding: 0;
    }
    
    .smallBox {
        position: relative;
        width: 400px;
        height: 300px;
    }
    
    .img_1 {
        width: 100%;
        height: 100%;
    }
    
    .bigBox {
        overflow: hidden;
        display: none;
        /* display: block; */
        position: relative;
        position: absolute;
        top: 10px;
        left: 450px;
        width: 800px;
        height: 600px;
        border: 1px solid blue;
    }
    
    .img_2 {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: yellow;
        opacity: 0.5;
    }

 <div class="smallBox">
        <img src="./img/cr.jpg" alt="" class="img_1" />
        <div class="mask"></div>
    </div>
    <div class="bigBox">
        <img src="./img/cr.jpg" alt="" class="img_2" />
    </div>

 //1.鼠标经过小盒子让大盒子和遮罩层显示与隐藏
        $('.smallBox').mouseover(function() {
                $(this).children('.mask').show()
                $(this).siblings('.bigBox').show()
            })
            //2.鼠标经过小盒子让大盒子和遮罩层显示与隐藏
        $('.smallBox').mouseleave(function() {
                $(this).children('.mask').hide()
                $(this).siblings('.bigBox').hide()
            })
            //3.求出鼠标在盒子里面的位置
        $('.smallBox').mousemove(function(e) {
            // console.log(e.pageX)
            var x = e.pageX - $(this).offset().left
            var y = e.pageY - $(this).offset().top
                //4.让鼠标在遮罩层的中间位置
            var maskLeft = x - $('.mask').width() / 2
            var maskTop = y - $('.mask').height() / 2
                // 5.遮罩层能移动的最大距离
            var maskMaxLeft = $('.smallBox').width() - $('.mask').width()
            var maskMaxTop = $('.smallBox').height() - $('.mask').height()

            // 6.限制遮罩层上下左右的位置
            if (maskLeft < 0) {
                maskLeft = 0
            } else if (maskLeft > maskMaxLeft) {
                maskLeft = maskMaxLeft
            }
            if (maskTop < 0) {
                maskTop = 0
            } else if (maskTop > maskMaxTop) {
                maskTop = maskMaxTop
            }
            // 这里不能用prop,prop是设置属性,position不能修改只能获取位置
            //7.赋值给遮罩层
            $('.mask').css({
                    left: maskLeft,
                    top: maskTop
                })
                // 遮罩层移动的距离             大图移动的距离
                // ---------------     =   -----------------
                // 遮罩层移动的最大距离         大图移动的最大距离
                //8.求出大图移动距离
            var img2MaxLeft = $('.img_2').width() - $('.bigBox').width()
            var img2MaxTop = $('.img_2').height() - $('.bigBox').height()
                // 9.大图的移动距离
            var img2Left = (maskLeft * img2MaxLeft) / maskMaxLeft
            var img2Top = (maskTop * img2MaxTop) / maskMaxTop
                //10.给大图的赋值
            $('.img_2').css({
                left: -img2Left,
                top: -img2Top
            })

        })