放大镜效果

实现原生放大镜效果

style部分

<style>
        *{margin:0; padding:0;}
        li{
            list-style: none;
        }
        .clearfix::after{
            content:"";
            clear:both;
            display: block;
        }
        .wrap{
            width: 1210px;
            margin: 50px auto;
        }
        .preview_wrap{
            width: 452px;
            float: left;
        }
        .info_wrap{
            width: 738px;
            height: 700px;
            float: right;
            background: pink;
        }
        .preview{
            width: 450px;
            height: 450px;
            border: 1px solid #ddd;
            position: relative;
        }
        .bigImg_box{
            width: 540px;
            height: 540px;
            border: 1px solid #ddd;
            position: absolute;
            left: 451px;
            top: -1px;
            background: #ccc;
            overflow: hidden;
            display: none;
        }
        .samllImg_box{
            width: 450px;
            height: 450px;
            position: relative;
        }
        .mask{
            width:303.75px;
            height: 303.75px;
            background: rgba(200,200,0,0.5);
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            display: none;
        }
        .goods_list li{
            width:54px;
            height: 54px;
            float: left;
            margin: 10px;
            border: 1px solid #ddd;
        }
        .goods_list li img{
            width:54px;
            height: 54px;
        }
    </style>

body部分

<div class="wrap clearfix">
        <div class="preview_wrap">
            <div class="preview" id="preview">
                <div class="box">
                    <div class="samllImg_box" id="samllImg_box">
                        <img src="image//tu1-m.png" alt="">
                        <div class="mask" id="mask"></div>
                    </div>
                    <ul class="goods_list clearfix" id="goods_list">
                        <li><img src="image/tu1-s.png" alt=""></li>
                        <li><img src="image/tu2-s.jpg" alt=""></li>
                        <li><img src="image/tu3-s.jpg" alt=""></li>
                        <li><img src="image/tu4-s.jpg" alt=""></li>
                        <li><img src="image/tu5-s.jpg" alt=""></li>
                    </ul>
                </div>
               
                <div class="bigImg_box" id="bigImg_box">
                    <img src="image/tu1-l.png" alt="">
                </div>

            </div>
        </div>
        <div class="info_wrap"></div>
    </div>

js部分

<script>
        var mask=document.querySelector('#mask');
        var samllImg_box=document.querySelector('#samllImg_box');
        var bigImg_box=document.querySelector('#bigImg_box');
        var bigImg=document.querySelector('#bigImg_box img');
        var mImg=document.querySelector('#samllImg_box img');
        var lis=document.querySelectorAll('#goods_list li');

        function getTL(obj){
            var l=obj.offsetLeft;
            var t=obj.offsetTop;
            var parent=obj.offsetParent;
            while(parent!=null){
                l=l+parent.offsetLeft+parent.clientLeft;
                t=t+parent.offsetTop+parent.clientLeft;
                parent=parent.offsetParent;
            }
            return {top:t,left:l};
        }


        var maxX=0,maxY=0;
        samllImg_box.onmouseenter=function(){
            mask.style.display="block";
            bigImg_box.style.display="block";
            maxX=samllImg_box.clientWidth-mask.offsetWidth;
            maxY=samllImg_box.clientHeight-mask.offsetHeight;
        }
        samllImg_box.onmouseleave=function(){
            mask.style.display="none";
            bigImg_box.style.display="none";
        }

        samllImg_box.onmousemove=function(event){
            var ev=window.event||ev;
            var x=ev.clientX-mask.offsetWidth/2-getTL(samllImg_box).left;
            var y=ev.clientY-mask.offsetHeight/2-getTL(samllImg_box).top;
            if(x<=0){
                x=0;
            }else if(x>=maxX){
                x=maxX;
            }

            if(y<=0){
                y=0;
            }else if(y>=maxY){
                y=maxY;
            }
            mask.style.left=x+'px';
            mask.style.top=y+'px';

            var scale=bigImg.clientWidth/samllImg_box.clientWidth; // 比例值

            bigImg_box.scrollLeft=scale*x;
            bigImg_box.scrollTop=scale*y;
        }
        lis[0].onclick=function(){
            mImg.src="image/tu1-l.png";
            bigImg.src="image/tu1-m.png"
        }
        lis[1].onclick=function(){
            mImg.src="image/tu2-m.jpg";
            bigImg.src="image/tu2-l.jpg"
        }
        lis[2].onclick=function(){
            mImg.src="image/tu3-m.jpg";
            bigImg.src="image/tu3-l.jpg"
        }
        lis[3].onclick=function(){
            mImg.src="image/tu4-m.jpg";
            bigImg.src="image/tu4-l.jpg"
        }
        lis[4].onclick=function(){
            mImg.src="image/tu5-m.jpg";
            bigImg.src="image/tu5-l.jpg"
        }
    </script>

希望可以帮到大家