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

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

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

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

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

//magnify
        //放大鏡效果，首先要獲取商品大圖div的jQuery對象
        var $imgWrap=$(".detail-img-main")
        //監(jiān)聽鼠標進入事件
        $imgWrap.mouseenter(function (e) {
            //#imgLoc為遮罩層，使其顯示
            $("#imgLoc").css("display","block")
            //.mainfyImg即放大鏡顯示元素，也使其顯示
            $(".manifyImg").css("display","block")
            
        })
        //監(jiān)聽鼠標離開事件
        $imgWrap.mouseleave(function (e) {
            //當鼠標離開時，使遮罩層隱藏
            $("#imgLoc").css("display","none")
            //當鼠標離開時，使放大鏡隱藏
            $(".manifyImg").css("display","none")
        })
        //監(jiān)聽鼠標的移動事件
        $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"
            //設(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")

請輸入代碼

查看完整項目可以去我的GitHub，歡迎大家的下載、提問和關(guān)注哈。

云服務(wù)器 GPU云服務(wù)器那是我圖片放大效果實現(xiàn)放大鏡效果 js實現(xiàn)放大鏡效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84010.html

發(fā)表評論

登陸后可評論

0條評論

ThreeWords

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow張量

閱讀 2729·2023-04-25 19:13
域名解析中的主機名填什么-主機域名中哪個表示主機名？

閱讀 4092·2021-09-22 15:34
渲染大量數(shù)據(jù)我是這樣操作的

閱讀 3079·2019-08-30 14:23
一篇關(guān)于BEM命名規(guī)范

閱讀 1495·2019-08-29 17:17
css3 動畫（四）animation.css 源碼分析

閱讀 1636·2019-08-29 16:05
前端面試（知識點）整理（一）

閱讀 1567·2019-08-29 13:26
css基礎(chǔ)

閱讀 1242·2019-08-29 13:19
[面試專題]習以為常卻被忽略的vue小知識

閱讀 582·2019-08-29 13:16

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章