JS實現放大鏡特效原理解析

實現特效所需的技術點：

onmouseover：鼠標移動到指定的對象上發生；
onmouseout：鼠標移出指定的對象時發生；
onmouseover：鼠標在移動時發生；
offsetLeft：獲取當前元素距父元素左側的值；
offsetTop：獲取當前元素距父元素頂部的值
offsetWidth：獲取當前元素的寬度；
offsetHeight：獲取當前元素的高度；
event.clientX：獲取瀏覽器（窗口）水平座標；
event.clientY：獲取瀏覽器（窗口）垂直座標；

style.css 文件：

* {
	margin: 0;
    padding: 0;
}

#demo {
	width: 313px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 60px;
    position: relative;
    display: flex;
    align-items: center;
}

#small-box {
	position: relative;
    z-index: 1;
}

#magnifier {
	display: none;
    width: 140px;
    height: 110px;
    position: absolute;
    background-color: #f7f7f7;
    border: 1px solid #cccccc;
    filter: alpha(opacity=60);
    opacity: 0.6;
    cursor: move;
}

#big-box {
    display: none;
    position: absolute;
    top: 0;
    left: 330px;
    width: 315px;
    height: 300px;
    overflow: hidden;
    border: 1px solid #cccccc;
    z-index: 1;
}

#big-box img {
    position: absolute;
    z-index: 5;
}

demo.html文件：

<div id="demo">
    <div id="small-box">
        <div id="magnifier"></div>
        <img src="images/small.jpg">
    </div>
    <div id="big-box">
        <img src="images/big.jpg">
    </div>
</div>

javascript文件：

<script>
    window.onload = function () {
        // 獲取各個元素
        var demo = document.getElementById('demo');
        var smallBox = document.getElementById('small-box');
        var magnifier = document.getElementById('magnifier');
        var bigBox = document.getElementById('big-box');
        var bigImg = bigBox.getElementsByTagName('img')[0];

        // 鼠標移動到小圖片上
        smallBox.onmouseover = function () {
            magnifier.style.display = "block";
            bigBox.style.display = "block";
        };
        // 鼠標移出小圖片
        smallBox.onmouseout = function () {
            magnifier.style.display = 'none';
            bigBox.style.display = 'none';
        };
        // 鼠標在圖片上移動
        smallBox.onmousemove = function (event) {
            // 獲取放大鏡左邊離圖片框的距離
            var left = event.clientX - demo.offsetLeft - smallBox.offsetLeft - magnifier.offsetWidth / 2;
            // 獲取放大鏡上邊離圖片框的距離
            var top = event.clientY - demo.offsetTop - smallBox.offsetTop - magnifier.offsetHeight / 2;

            // 設置水平方向放大鏡離圖片框最小距離爲0，最大距離爲：圖片框寬度 - 放大鏡寬度，這樣放大鏡就不會超出圖片框了
            if (left < 0) {
                left = 0;
            } else if (left > (smallBox.offsetWidth - magnifier.offsetWidth)) {
                left = smallBox.offsetWidth - magnifier.offsetWidth;
            }
            // 垂直方向同理
            if (top < 0) {
                top = 0;
            } else if (top > (smallBox.offsetHeight - magnifier.offsetHeight)) {
                top = smallBox.offsetHeight - magnifier.offsetHeight;
            }

            // 設置放大鏡的left\top值，讓放大鏡跟隨鼠標移動
            magnifier.style.left = left + 'px';
            magnifier.style.top = top + 'px';

            // 放大鏡移動距離的百分比 = 鼠標移動的距離（或放大鏡移動的距離） / 放大鏡可移動的最大範圍
            var percentX = left / (smallBox.offsetWidth - magnifier.offsetWidth);
            var percentY = top / (smallBox.offsetHeight - magnifier.offsetHeight);

            // 根據放大鏡移動距離的百分比 = 右邊大圖片移動距離的百分比,可以得到以下公式，並計算出大圖片的left和top值
            bigImg.style.left = -percentX * (bigImg.offsetWidth - bigBox.offsetWidth) + 'px';
            bigImg.style.top = -percentY * (bigImg.offsetHeight - bigBox.offsetHeight) + 'px';
        }
    }
</script>

代碼效果：

THE END !