js 放大镜

来源：互联网发布：redis 命令查看数据库编辑：程序博客网时间：2024/05/17 09:35
<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