原生JS實現放大鏡功能

原生JS實現的放大鏡功能，自己寫的，簡單使用

點擊下面連接去我的github上下載出來打開就行，不需要複雜配置，在img標籤的src屬性把你自己的圖片換上去就ok。
文件在此

走過路過，喜歡的話點個贊，加個關注，鼓勵一下吧！

主要功能代碼，如下

原理是判斷鼠標在小圖上的位置，再用一個比例去顯示大圖上對應的部分！

//鼠標在小盒子中移動時 遮蓋層跟着鼠標移動
smallBox.onmousemove = function (e) {
    e = e || event;
    //獲取鼠標在小盒子中的座標
    var x = getPage(e).pageX - box.offsetLeft;
    var y = getPage(e).pageY - box.offsetTop;
    x = x - mask.offsetWidth / 2;
    y = y - mask.offsetHeight / 2;

    x = x < 0 ? 0 : x;
    y = y < 0 ? 0 : y;

    var maxX = smallBox.offsetWidth - mask.offsetWidth;
    var maxY = smallBox.offsetHeight - mask.offsetHeight;

    x = x > maxX ? maxX : x;
    y = y > maxY ? maxY : y;

    mask.style.left = x + 'px';
    mask.style.top = y + 'px';

    //顯示對應的大圖部分
    ///計算大圖片的偏移
    //mask移動的距離/大圖片移動的距離 = mask最大能移動的距離/大圖片最大能移動的距離
    //大圖片移動的距離=mask移動的距離 * 大圖片最大能移動的距離/mask最大移動的距離
    //大圖片最大能移動的距離
    var bigMaxX = bigImg.offsetWidth - bigBox.offsetWidth;
    var bigMaxY = bigImg.offsetHeight - bigBox.offsetHeight;
	
	var bigImgx = x * bigMaxX / maxX;
	var bigImgy = y * bigMaxY / maxY;	
	//負的  因爲左邊圖片鼠標向下移的時候,右邊大圖應該向上移動
	bigImg.style.left = -bigImgx + 'px';
	bigImg.style.top = -bigImgy + 'px';
}

效果圖