那是我夕陽下的奔跑，電商網(wǎng)站PC端詳情頁圖片放大效果實(shí)現(xiàn)

ThreeWords 發(fā)布于2019-08-20 18:01 / 2915人閱讀

摘要：使用鼠標(biāo)的坐標(biāo)值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標(biāo)離開的監(jiān)聽事件，當(dāng)鼠標(biāo)離開商品大圖時隱藏遮罩層以及放大鏡。

在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細(xì)節(jié)，該特效實(shí)現(xiàn)鼠標(biāo)懸停在商品大圖上時，在商品大圖右側(cè)出現(xiàn)放大鏡效果并根據(jù)鼠標(biāo)的位置來改變右側(cè)大圖的顯示內(nèi)容，放大鏡中的內(nèi)容和鼠標(biāo)懸停位置的內(nèi)容相同。該特效的實(shí)現(xiàn)效果圖為：

對商品大圖添加鼠標(biāo)監(jiān)聽事件，首先監(jiān)聽鼠標(biāo)的進(jìn)入事件，在監(jiān)聽事件中將鼠標(biāo)在大圖上遮罩層以及放大圖片的顯示區(qū)域設(shè)置為可見。監(jiān)聽鼠標(biāo)的移動事件，首先獲取相關(guān)坐標(biāo)，獲取大圖在頁面中的相對位置，再獲取鼠標(biāo)相對于頁面的位置，使用后者坐標(biāo)減去前者坐標(biāo)得到鼠標(biāo)相對于大圖的位置。使用鼠標(biāo)的坐標(biāo)值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。使用遮罩層的坐標(biāo)值乘以放大倍數(shù)得到放大鏡里圖片的坐標(biāo)值，這里放大值設(shè)置為2。根據(jù)這些得到的坐標(biāo)值設(shè)置遮罩層的坐標(biāo)，以及放大鏡區(qū)域中圖片坐標(biāo)。最后添加鼠標(biāo)離開的監(jiān)聽事件，當(dāng)鼠標(biāo)離開商品大圖時隱藏遮罩層以及放大鏡。
具體實(shí)現(xiàn)代碼：

//magnify
        //放大鏡效果，首先要獲取商品大圖div的jQuery對象
        var $imgWrap=$(".detail-img-main")
        //監(jiān)聽鼠標(biāo)進(jìn)入事件
        $imgWrap.mouseenter(function (e) {
            //#imgLoc為遮罩層，使其顯示
            $("#imgLoc").css("display","block")
            //.mainfyImg即放大鏡顯示元素，也使其顯示
            $(".manifyImg").css("display","block")
            
        })
        //監(jiān)聽鼠標(biāo)離開事件
        $imgWrap.mouseleave(function (e) {
            //當(dāng)鼠標(biāo)離開時，使遮罩層隱藏
            $("#imgLoc").css("display","none")
            //當(dāng)鼠標(biāo)離開時，使放大鏡隱藏
            $(".manifyImg").css("display","none")
        })
        //監(jiān)聽鼠標(biāo)的移動事件
        $imgWrap.mousemove(function (e) {
            //得到商品大圖的相對于頁面的橫坐標(biāo)
            var imgX=document.getElementById("imgMainWrap").getBoundingClientRect().left
            //得到商品大圖的相對于頁面的縱坐標(biāo)
            var imgY=document.getElementById("imgMainWrap").getBoundingClientRect().top
            //得到鼠標(biāo)相對于商品大圖的橫坐標(biāo)，使用鼠標(biāo)相對于頁面的橫坐標(biāo)減去商品大圖相對于頁面的坐標(biāo)
            var cursorX=e.clientX-imgX
            //得到鼠標(biāo)相對于商品大圖的縱坐標(biāo)
            var cursorY=e.clientY-imgY
            //得到遮罩層的坐標(biāo)，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"
            }
            //計(jì)算得到放大鏡中圖片的顯示位置
            var maginfyX=-parseInt(maskX)*2+"px"
            var maginfyY=-parseInt(maskY)*2+"px"
            //設(shè)置遮罩層的位置
            $("#imgLoc").css("left",maskX)
            $("#imgLoc").css("top",maskY)
            //設(shè)置放大鏡中圖片的位置
            $(".manifyImg img").css("left",maginfyX)
            $(".manifyImg img").css("top",maginfyY)
        })

以下是HTML結(jié)構(gòu)
div.detail-img

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