效果如下圖所示：

1.HTML佈局

       佈局採用一個大的div和三個子div，大div大小和左上角有邊框的div相等，定義最大div的id為box，有邊框的div為smallbox,右邊大圖的div為bigbox，下面三張圖片的整體div為list.(下面以id指代各個div)。smallbox中的指示標採用span。

       smallbox和bigbox預先只放入一張圖片，設定small_box的定位position為relative。bigbox和list為absolute。位置和大小取決於圖片和個人喜好。

       smallbox中的標記和bigbox需要隱藏起來。

2.JS

      2.1 獲取各個標籤的dom

      2.2 對list中圖片的監聽，改變smallbox中的圖片

      遍歷list中的圖片，這是滑鼠進入監聽

for (var i=0; i<allLis.length; i++){
    (function (i) {
        allLis[i].onmouseover = function () {
            small_box.children[0].src = "images/pic00" + (i + 1) + ".jpg";
            big_box.children[0].src = "images/pic0" + (i + 1) + ".jpg"
        }
    })(i)
}
 

      由於同步非同步問題，改變圖片需要使用閉包。（具體內部原理不是特別理解）

      2.3 對smallbox中的圖片進行滑鼠監聽

      當滑鼠進入smallbox中（onmouseover），顯示標記和大圖。

        mark.style.display = "block";

        big_box.style.display = "block";

      在此函式中，監聽滑鼠移動（onmousemove）:

      滑鼠移動，獲取事件event

small_box.onmousemove = function (event) {
                var e = event || window.event;  //相容
                
                //獲取滑鼠距離smallbox左邊的距離 - 半個標記的長寬
                var mouseX = e.clientX - box.offsetLeft - mark.offsetWidth * 0.5;
                var mouseY = e.clientY - box.offsetTop - mark.offsetHeight * 0.5 ;

                //邊界監測，在滑鼠超出邊界時的處理
                if (mouseX < 0){
                    mouseX = 0;
                }else if (mouseX >= small_box.offsetWidth - mark.offsetWidth){
                    mouseX = small_box.offsetWidth - mark.offsetWidth;
                }

                if (mouseY < 0){
                    mouseY = 0;
                }else if (mouseY >= small_box.offsetHeight - mark.offsetHeight){
                    mouseY = small_box.offsetHeight - mark.offsetHeight;
                }
                //讓標記動起來
                mark.style.left = mouseX + 'px';
                mark.style.top = mouseY + 'px';
                //大圖動
                /**放大鏡公式
                 * smallX / bigX = smallBox.width / bigBox.width
                 */
                console.log(mouseX / (small_box.offsetWidth / big_box.offsetWidth));
                big_img.style.left = - mouseX / (small_box.offsetWidth / big_box.offsetWidth) + 'px';
                big_img.style.top = - mouseY / (small_box.offsetHeight / big_box.offsetHeight) + 'px';

            }
 

      2.4 監聽滑鼠離開smallbox

small_box.onmouseout =function () {
            mark.style.display = "none";
            big_box.style.display = "none";
        }

     缺陷：上下滾動時並沒有設定監聽，標記和大圖在網頁滾動時不會隨著滑鼠移動。