JavaScript原生放大镜效果

最新推荐文章于 2022-10-06 17:05:39 发布

feng1737000

最新推荐文章于 2022-10-06 17:05:39 发布

阅读量148

点赞数

本文链接：https://blog.csdn.net/feng1737000/article/details/78993907

版权

    <body style="width: 2000px;height: 2000px;">
        <div id="wrap_small">
            <img src="img/small.png" />
            <div id="zoom"></div>
            <div id="wrap_big">
                <img src="img/big.png" />
            </div>
        </div>
    </body>

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #wrap_small {
                width: 500px;
                height: 500px;
                position: relative;
                left: 0;
                right: 0;
                margin: 100px auto;
            }

            #wrap_small>img {
                position: absolute;
                left: 0;
                top: 0;
            }

            #wrap_big {
                width: 500px;
                height: 500px;
                position: absolute;
                left: 600px;
                top: 0;
                overflow: hidden;
                display: none;
            }

            #wrap_big>img {
                position: absolute;
                left: 0;
                top: 0;
            }

            #zoom {
                width: 100px;
                height: 100px;
                background: rgba(0, 0, 0, 0.4);
                position: absolute;
                left: 0;
                top: 0;
                display: none;
            }
        </style>

    <script type="text/javascript">
        var wrapSmall = document.getElementById("wrap_small");
        var zoom = document.getElementById("zoom");
        var wrapBig = document.getElementById("wrap_big");
        var bigImg = wrapBig.getElementsByTagName('img')[0];
        wrapSmall.onmouseenter = function() {
            zoom.style.display = 'block';
            wrapBig.style.display = 'block';
            var scaleLeft = (wrapBig.offsetWidth - bigImg.offsetWidth) / (wrapSmall.offsetWidth - zoom.offsetWidth);
            var scaleTop = (wrapBig.offsetHeight - bigImg.offsetHeight) / (wrapSmall.offsetHeight - zoom.offsetHeight);
            wrapSmall.onmousemove = function(e) {
                zoom.style.left = e.clientX + 　document.documentElement.scrollLeft - wrapSmall.offsetLeft - zoom.offsetWidth / 2 + 'px';
                zoom.style.top = e.clientY + 　document.documentElement.scrollTop - wrapSmall.offsetTop - zoom.offsetHeight / 2 + 'px';
                if (zoom.offsetLeft <= 0) {
                    zoom.style.left = 0;
                }
                if (zoom.offsetTop <= 0) {
                    zoom.style.top = 0;
                }
                if (zoom.offsetLeft >= wrapSmall.offsetWidth - zoom.offsetWidth) {
                    zoom.style.left = wrapSmall.offsetWidth - zoom.offsetWidth +　'px';
                }
                if (zoom.offsetTop >= wrapSmall.offsetHeight - zoom.offsetHeight) {
                    zoom.style.top = wrapSmall.offsetHeight - zoom.offsetHeight +　'px';
                }
                bigImg.style.left = zoom.offsetLeft * scaleLeft +　'px';
                bigImg.style.top = zoom.offsetTop * scaleTop +　'px';
            }
        }
        wrapSmall.onmouseleave = function() {
            zoom.style.display = 'none';
            wrapBig.style.display = 'none';
            wrapSmall.onmousemove = null;
        }
    </script>

feng1737000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript原生放大镜效果

body style="width: 2000px;height: 2000px;"> div id="wrap_small"> img src="img/small.png" /> div id="zoom">div> div id="wrap_big"> img src="i
复制链接

扫一扫