那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

時間 2019-11-08

原文原文鏈接

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

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

//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)
        })

如下是HTML結構
div.detail-imgcss

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')