图片放大镜效果【源代码】

最新推荐文章于 2021-07-31 14:00:40 发布

小管打天下

最新推荐文章于 2021-07-31 14:00:40 发布

阅读量323

点赞数

分类专栏：代码专栏

本文链接：https://blog.csdn.net/qq_42647547/article/details/118004871

版权

代码专栏专栏收录该内容

13 篇文章 1 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片放大镜</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="img-wrap">
        <div class="mag-wrap">
            <img src="img/1.jpg" class="mag-img" alt="">
        </div>
        <a href="javascript:;" class="img-lk">
            <img src="img/1.jpg" class="static-img" alt="">
        </a>
    </div>
    <script src="js/utils.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

index.css

.img-wrap {
    position: relative;
    width: 375px;
    height: 522px;
    margin: 100px auto;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px #999;
    /* overflow: hidden; */
}

.img-wrap .mag-wrap {
    display: none;
    position:  absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background-color: #fff;
    box-shadow: 0 0 3px #ccc;
    overflow: hidden;
}

.img-wrap .mag-wrap.show {
    display: block;
    transform: scale(1.5);
}

.img-wrap .mag-wrap .mag-img {
    position: absolute;
    top: 0;
    left: 0;
    widows: 375px;
    height: 500px;
}

.img-wrap .static-img {
    width: 100%;
}

index.js

window.onload = function () {
    init();
}

function init() {
    initMagnifier();
}

var initMagnifier = (function () {
    var oImgWrap = document.getElementsByClassName('img-wrap')[0],
        oMagWrap = oImgWrap.getElementsByClassName('mag-wrap')[0],
        oMagImg = oMagWrap.getElementsByClassName('mag-img')[0],
        magWidth = getStyles(oMagWrap, 'width'),
        magHeight = getStyles(oMagWrap, 'height'),
        imgX = oImgWrap.offsetLeft,
        imgY = oImgWrap.offsetTop;

    addEvent(oImgWrap, 'mouseover', function (e) {
        showMag(getXY(e).x, getXY(e).y)
        oMagWrap.className += ' show';
        addEvent(document, 'mousemove', mouseMove);
    })

    addEvent(oImgWrap, 'mouseout', mouseOut);

    function mouseMove(e) {
        showMag(getXY(e).x, getXY(e).y, getXY(e).mouseX, getXY(e).mouseY)
    }

    function mouseOut(e) {
        oMagWrap.className = 'mag-wrap';
        removeEvent(document, 'mousemove', mouseMove);
    }

    function getXY(e) {
        var e = e || window.event;

        return {
            x: pagePos(e).X - imgX - magWidth / 2,
            y: pagePos(e).Y - imgY - magHeight / 2,
            mouseX: pagePos(e).X - imgX,
            mouseY: pagePos(e).Y - imgY
        }
    }

    function showMag(x, y, mouseX, mouseY) {
        oMagWrap.style.left = x + 'px';
        oMagWrap.style.top = y + 'px';
        oMagImg.style.left = -x + 'px';
        oMagImg.style.top = -y + 'px';

        if (mouseX && mouseY) {
            if (mouseX < 0 || mouseX > getStyles(oImgWrap, 'width') || mouseY < 0 || mouseY > getStyles(oImgWrap, 'height')) {
                oMagWrap.className = 'mag-wrap';
            }
        }
    }
});

小管打天下

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片放大镜效果【源代码】

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <
复制链接

扫一扫