js 放大镜

小二来个美妞

于 2016-10-28 20:54:35 发布

阅读量217

点赞数

本文链接：https://blog.csdn.net/z807458494y/article/details/52959745

版权

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .wrap {
            width: 1000px;
            height: 800px;
            position: relative;
            border: 1px solid red;
        }

        .wrap img {
            width: 100%;
            height: 100%;
        }

        .box {
            width: 200px;
            height: 200px;
            position: absolute;
            border-radius: 50%;
            top: 0px;
            left: 0px;
            overflow: hidden;
        }

        .box img {
            width: 2000px;
            height: 1600px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <img src="img/wa.png" />
        <div class="box">
            <img src="img/wa.png" />
        </div>
    </div>
</body>
<script type="text/javascript">
    var wrap = document.querySelector('.wrap');
    var box = document.querySelector('.box');
    var boxImg = document.querySelector('.box img');

    wrap.onmousemove = function() {
        var e = window.event || event;
        box.style.display = 'inline-block';

        var disX = e.clientX - box.offsetWidth / 2;
        var disY = e.clientY - box.offsetHeight / 2;
        if(disX <= 0) {
            disX = 0;
        }
        if(disX >= (wrap.offsetWidth - box.offsetWidth)) {
            disX = wrap.offsetWidth - box.offsetWidth;
        }
        if(disY <= 0) {
            disY = 0;
        }
        if(disY >= (wrap.offsetHeight - box.offsetHeight)) {
            disY = wrap.offsetHeight - box.offsetHeight;
        }

        box.style.left = disX + 'px';
        box.style.top = disY + 'px';

        var scaleX = box.offsetLeft / (wrap.offsetWidth - box.offsetWidth);
        var scaleY = box.offsetTop / (wrap.offsetHeight - box.offsetHeight);

        box.scrollLeft = (boxImg.offsetWidth - box.offsetWidth) * scaleX;
        box.scrollTop = (boxImg.offsetHeight - box.offsetHeight) * scaleY;
    }
</script>

小二来个美妞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 放大镜

<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap { width: 1000px; height: 800px; position: relative; borde
复制链接

扫一扫