在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現滑鼠懸停在商品大圖上時，在商品大圖右側出現放大鏡效果並根據滑鼠的位置來改變右側大圖的顯示內容，放大鏡中的內容和滑鼠懸停位置的內容相同。該特效的實現效果圖為：

對商品大圖新增滑鼠監聽事件，首先監聽滑鼠的進入事件，在監聽事件中將滑鼠在大圖上遮罩層以及放大圖片的顯示區域設定為可見。監聽滑鼠的移動事件，首先獲取相關座標，獲取大圖在頁面中的相對位置，再獲取滑鼠相對於頁面的位置，使用後者座標減去前者座標得到滑鼠相對於大圖的位置。使用滑鼠的座標值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。使用遮罩層的座標值乘以放大倍數得到放大鏡裡圖片的座標值，這裡放大值設定為2。根據這些得到的座標值設定遮罩層的座標，以及放大鏡區域中圖片座標。最後新增滑鼠離開的監聽事件，當滑鼠離開商品大圖時隱藏遮罩層以及放大鏡。

            a(href='javascript:;').detail-img-main#imgMainWrap
                img(src='./images/detail/band/b1.jpg')#imgMain
                div#imgLoc
            div.manifyImg
                img(src='./images/detail/band/b1.jpg')

//magnify
        //放大鏡效果，首先要獲取商品大圖div的jQuery物件
        var $imgWrap=$('.detail-img-main')
        //監聽滑鼠進入事件
        $imgWrap.mouseenter(function (e) {
            //#imgLoc為遮罩層，使其顯示
            $('#imgLoc').css('display','block')
            //.mainfyImg即放大鏡顯示元素，也使其顯示
            $('.manifyImg').css('display','block')
            
        })
        //監聽滑鼠離開事件
        $imgWrap.mouseleave(function (e) {
            //當滑鼠離開時，使遮罩層隱藏
            $('#imgLoc').css('display','none')
            //當滑鼠離開時，使放大鏡隱藏
            $('.manifyImg').css('display','none')
        })
        //監聽滑鼠的移動事件
        $imgWrap.mousemove(function (e) {
            //得到商品大圖的相對於頁面的橫座標
            var imgX=document.getElementById('imgMainWrap').getBoundingClientRect().left
            //得到商品大圖的相對於頁面的縱座標
            var imgY=document.getElementById('imgMainWrap').getBoundingClientRect().top
            //得到滑鼠相對於商品大圖的橫座標，使用滑鼠相對於頁面的橫座標減去商品大圖相對於頁面的座標
            var cursorX=e.clientX-imgX
            //得到滑鼠相對於商品大圖的縱座標
            var cursorY=e.clientY-imgY
            //得到遮罩層的座標，106是遮罩層邊長的一半
            var maskX=(cursorX-106)+'px'
            var maskY=(cursorY-106)+'px'
            //保證遮罩層是完整的
            if (cursorX<106) {
                maskX='0px'
            }else if (cursorX>310) {
                maskX='200px'
            }
            if (cursorY<106) {
                maskY='0px'
            }else if (cursorY>310) {
                maskY='200px'
            }
            //計算得到放大鏡中圖片的顯示位置
            var maginfyX=-parseInt(maskX)*2+'px'
            var maginfyY=-parseInt(maskY)*2+'px'
            //設定遮罩層的位置
            $('#imgLoc').css('left',maskX)
            $('#imgLoc').css('top',maskY)
            //設定放大鏡中圖片的位置
            $('.manifyImg img').css('left',maginfyX)
            $('.manifyImg img').css('top',maginfyY)
        })