如何用js实现放大镜效果

如图所示

img


代码如下：


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #smlImg {
            width: 300px;
            height: 300px;
            /* position: relative; */
            /* float: left; */
            background-image: url(../img/2.jpg);
            background-size: cover;
        }

        #smlDiv{
            width: 100px;
            height: 100px;
            /* background-color: rgba(rgb(180, 175, 175), rgb(180, 175, 175), rgb(180, 175, 175), 0.5); */
            background-color:rgba(212, 234, 123, 0.2);
            display: none;
            position: absolute;
        }
        #bigDiv{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 300px;
            top: 0px;
            overflow: hidden;
            display: none;
        }
        #bigImg{
            width: 900px;
            height: 900px;
            position: absolute;
        }
    style>
head>

<body>
    <div class="Box">
        <div id="smlImg">
            
            <div id="smlDiv" >div>
        div>
        <div id="bigDiv">
            <img src="../img/2.jpg" alt="" id="bigImg">
        div>
    div>
    <script>
        // 鼠标移入，出现小Div和大div
        var smlImg= document.getElementById('smlImg')
        var smlDiv=document.getElementById('smlDiv')
        var bigDiv=document.getElementById('bigDiv')
        smlImg.onmouseover=function(){
            smlDiv.style.display='block'
            bigDiv.style.display='block'
        }
        // 鼠标移出，隐藏小div.大div
        smlImg.onmouseout=function(){
            smlDiv.style.display='none'
            bigDiv.style.display='none'
        }
        // 小div随着鼠标移动绑定事件
        smlDiv.onmousemove=function(eve){
            var eve=eve||window.event
            // console.log(eve)
            // console.log(eve.clientX,eve.clientY)
            var x=eve.clientX-50;
            var y=eve.clientY-50
            // 对移动范围进行判断
            if(x>=200){
                x=200
            }
            if(y>=200){
                y=200
            }
            if(x<=0){
                x=0
            }
            if(y<=0){
                y=0
            }
            smlDiv.style.left=x+'px'
            smlDiv.style.top=y+'px'
            // 大图移动和小图相反
            bigImg.style.left=-3*x+'px'
            bigImg.style.top=-3*y+'px'
        }
    script>
body>

html>

其中，需要注意的是移动的大小计算问题，需要细心一点

那么你的问题是什么呢？如果是技术分享，那么写在blog比较好。