image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         .img-wrap {
    10.             position: relative;
    11.             width: 375px;
    12.             height: 500px;
    13.             margin: 100px auto;
    14.             border: 1px solid #ddd;
    15.             box-shadow: 0 0 5px #999;
    16.         }
    18.         .img-wrap .mag-wrap {
    19.             display: none;
    20.             position: absolute;
    21.             top: 0px;
    22.             left: 0px;
    23.             width: 150px;
    24.             height: 150px;
    25.             background-color: #fff;
    26.             box-shadow: 0 0 3px #ccc;
    27.             overflow: hidden;
    28.         }
    30.         .img-wrap .mag-wrap.show {
    31.             display: block;
    32.             transform: scale(1.5);
    33.         }
    35.         .img-wrap .mag-wrap .mag-img {
    36.             position: absolute;
    37.             top: 0;
    38.             left: 0;
    39.             width: 375px;
    40.             height: 500px;
    41.             /* border: 10px solid green; */
    42.         }
    44.         .img-wrap .static-img {
    45.             height: 100%;
    46.         }
    47.     </style>
    48. </head>
    49. <body>
    50.     <div class="img-wrap">
    51.         <div class="mag-wrap">
    52.             <img src="./img/2.jpg" class="mag-img" alt="图片1" />
    53.         </div>
    54.         <a href="javascript:;"  class="img-lk">
    55.             <img src="./img/2.jpg" class="static-img" alt="图片2" />
    56.         </a>
    57.     </div>
    58.     <script src="./js/untils.js"></script>
    59.     <script src="./js/magnifier.js"></script>
    60. </body>
    61. </html>
    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';
        oMagWrap.className += ' show';

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

    待解决问题：1.a标签的属性 是块级还是行内元素 还是行内块
    2.块级还是行内元素 行内块 的特点
    3.a标签内的图片标签设置高度为100% a标签的父级元素的宽高设置成 图片原始大小的50% 那么不设置宽度的情况下 自动设置成原始图片的宽度的50% 待试验