零JS筆記 | 圖片放大镜

问题：

<div id="div1">
    <div id="div2"></div>
</div>
<script>
    var _div1 = document.getElementById('div1')
    var _div2 = document.getElementById('div2')
    _div1.onmouseover = function () {
        document.title += 1
    }
    _div1.onmouseout = function () {
        document.title += 2
    }
</script>
<style>
    #div1 { width: 200px; height: 200px; background: red; }
    #div2 { width: 100px; height: 100px; background: yellow; }
</style>

從紅---> 黃 2121212121
1、觸發本身元素的out事件，所以+2,當到黃上，冒泡，又觸發本身的over事件+1
2、所以会发生闪动；

解决：
1、js: onmouseenter onmouseleave （子級不會影響父級 ）
2、全兼容作法；
3、css: 加層隔開父子級；

window.onload = function () {
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');

    oDiv1.onmouseover = function (ev) {
        var ev = ev || window.event;

        var a = this, b = ev.relatedTarget; //相對目標，之前的目標，移入目標之前的元素
        if (!elContains(a, b) && a != b) {
            document.title += '1';
        }
    };
    oDiv1.onmouseout = function (ev) {
        var ev = ev || window.event;

        var a = this, b = ev.relatedTarget;
        if (!elContains(a, b) && a != b) {
            document.title += '2';
        }
    };
};

function elContains(a, b) {  //判断两个元素是否是嵌套关系 a是否包含b
    return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}

简单放大镜：

window.onload = function () {
    var _div = document.getElementById('div1')
    var _span = document.getElementsByTagName('span')[0]
    var _div2 = document.getElementById('div2')
    var _img2 = _div2.getElementsByTagName('img')[0]
    _div.onmouseover = function () {
        _span.style.display = 'block'
    }
    _div.onmouseout = function () {
        _span.style.display = 'none'
    }
    _div.onmousemove = function (e) {
        var e = e || event;
        var L = e.clientX - _div.offsetLeft - _span.offsetWidth / 2
        var T = e.clientY - _div.offsetTop - _span.offsetHeight / 2
        if (L < 0) {
            L = 0
        }
        else if (L > _div.offsetWidth - _span.offsetWidth) {
            L = _div.offsetWidth - _span.offsetWidth
        }
        if (T < 0) { //注意這裏不能寫else if
            T = 0
        }
        else if (T > _div.offsetHeight - _span.offsetHeight) {
            T = _div.offsetHeight - _span.offsetHeight
        }
        _span.style.left = L + 'px'
        _span.style.top = T + 'px'
        var scaleX = L / (_div.offsetWidth - _span.offsetWidth) //比例； 0-1
        var scaleY = T / (_div.offsetHeight - _span.offsetHeight) //比例：0-1
//大圖能走的距離為本身距離 - 大圖外層可視區的距離 ；
//此距離  * 比例

        _img2.style.left = -scaleX * (_img2.offsetWidth - _div2.offsetWidth) + 'px'
        _img2.style.top = -scaleY * (_img2.offsetHeight - _div2.offsetHeight) + 'px'


    }
}

See the Pen jbgrXw by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>