用最简单的方法实现原生JS放大镜特效-原创手记-慕课网

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

ql5307 2019-12-15 21:08:45 浏览 1331

ql5307

关注TA

手记 8

粉丝 1

获赞 27

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

效果如下：

0人推荐

发表评论