图片放大镜效果

Posted 2021-01-09 mosquito18

类似某宝的图片放大镜效果，言简意赅，直接上代码

html

    <div id="container">
        <div class="leftView">
            <div class="mask"></div>
            <img class="smallImg" src="./5.jpg" alt="缩小版">
        </div>
        <div class="rightView">
            <img class="bigImg" src="./5.jpg" alt="放大版">
        </div>
    </div>

css

        #container {
            position: relative;
        }

        .leftView {
            position: relative;
            width: 318px;
            height: 318px;
        }

        .smallImg {
            max-height: 100%;
            max-width: 100%;
        }

        .mask {
            display: none;
            position: absolute;
            background: pink;
            /* width: 100px;
            height: 100px;
            top:0;
            left: 0; */
             opacity: 0.5; 
            /* background: url(./images/5.jpg); */
            cursor: move;
        }
        .bigImg{
            position: absolute;
            width: 400px;
            height: 400px;
        }
        .rightView {
            display: none;
            position: absolute;
            left: 338px;
            top: 0;
            width: 318px;
            height: 318px;
            overflow: hidden;
        }

js

function calculateMaskWH() {
            var width = $(‘.leftView‘).width() / $(‘.bigImg‘).width() * $(‘.rightView‘).width();
            var height = $(‘.leftView‘).height() / $(‘.bigImg‘).height() * $(‘.rightView‘).height();
            $(‘.mask‘).css({
                width: width,
                height: height
            });
            // console.log($(‘.mask‘).width(),$(‘.mask‘).height());
        }
        calculateMaskWH();
        //监听鼠标mouseover事件  
        $(‘.leftView‘).on(‘mouseover‘, function () {
            $(‘.mask‘).css(‘display‘, ‘block‘);
            $(‘.rightView‘).css(‘display‘, ‘block‘);
            $(‘.leftView‘).on(‘mousemove‘, function (event) {        //计算放大镜的left值和top值  
                var left = event.pageX - $(this).offset().left - $(‘.mask‘).width() / 2; var top = event.pageY - $(this).offset().top - $(‘.mask‘).height() / 2;        //判断放大镜左右是否出界  
                if (left < 0) {
                    left = 0
                } else if (left > $(this).width() - $(‘.mask‘).width()) {
                    left = $(this).width() - $(‘.mask‘).width();
                }        //判断放大镜上下是否出现  
                if (top < 0) {
                    top = 0;
                } else if (top > $(this).height() - $(‘.mask‘).height()) {
                    top = $(this).height() - $(‘.mask‘).height();
                }
                
                $(‘.mask‘).css({
                    left: left + ‘px‘, top: top + ‘px‘
                });        //计算比例  
                var rate = $(‘.bigImg‘).width() / $(‘.leftView‘).width();
                $(‘.bigImg‘).css({
                    left: -rate * left + ‘px‘,
                    top: -rate * top + ‘px‘
                });
            });
        });
        //监听鼠标mouseout事件    
        $(‘.leftView‘).on(‘mouseout‘, function () {
            $(‘.mask‘).css(‘display‘, ‘none‘);
            $(‘.rightView‘).css(‘display‘, ‘none‘);
        });

运行结果：

喜欢粉粉的哈哈哈~

代码地址：https://github.com/ouxiaojie18/-/tree/master/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%95%88%E6%9E%9C