用最简单的方法实现原生 JS 放大镜特效

汤清丽的个人博客 / 172 / 0 / 创建于 4年前

<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                *{margin:0px;padding:0px;}
                #big{width:200px;height:200px;position:absolute;overflow:hidden;left:480px;top:20px;display:none;}
        </style>
</head>
<body>
        <img src="./1.jpg" width="400" id="small" alt="">
        <div id="big">
                <img src="./1.jpg" alt="">
        </div>
</body>
<script>
        var big = document.getElementById('big');
        var small = document.getElementById('small');
        small.onmousemove = function(e){
                var e = e || event;
                document.title="X:"+e.clientX+"Y:"+e.clientY;
                //获取对应的大图的坐标
                //将大图的滚动条的位置调整到小图的鼠标坐标的4被的位置
                big.scrollLeft = e.clientX*4-80;
                big.scrollTop = e.clientY*4-80;
                //让对应的大图显示
                big.style.display="block";

        }
        small.onmouseout = function(){
                //鼠标移除之后让你的大图隐藏
                big.style.display="none";
        }
</script>
</html>