web前端入门到实战：用最简单的方法实现原生JS放大镜特效

作者: 大前端世界 | 来源:发表于2020-01-02 22:04 被阅读0次

web前端入门到实战：用最简单的方法实现原生JS放大镜特效
Web前端实现瀑布流的几种方法
animation参考
web前端入门到实战：原生JS快速实现拖放（drag and d
web前端入门到实战：原生js去除过滤空格的最简实现
技术文章地址
web前端入门到实战：js实现弹幕效果
0基础自学linux运维-5.1-java推荐书籍
图片懒加载
web前端入门到实战：放大镜效果

<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>