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

weknow619 發布于2019-08-01 17:09 / 2898人閱讀

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

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

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

//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-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，歡迎大家的下載、提問和關注哈。

GPU云服務器云服務器那是我圖片放大效果實現放大鏡效果 js實現放大鏡效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50985.html

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

摘要：使用鼠標的坐標值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標離開的監聽事件，當鼠標離開商品大圖時隱藏遮罩層以及放大鏡。在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現鼠標懸停在商品大圖上時，在商品大圖右側出現放大鏡效果并根據鼠標的位置來改變右側大圖的顯示內容，放大鏡中的內容和鼠標懸停位置的內容相同。該特效的實現效果圖為：showImg(https://...

ThreeWords 2019-08-20 18:01 評論0 收藏0
那是我夕陽下的奔跑，電商網站PC端詳情頁圖片放大效果實現

摘要：使用鼠標的坐標值減去遮罩層的一半的寬度，從而得到遮罩層顯示的位置。最后添加鼠標離開的監聽事件，當鼠標離開商品大圖時隱藏遮罩層以及放大鏡。在詳情頁瀏覽時商品大圖還是不能完全看清楚商品的細節，該特效實現鼠標懸停在商品大圖上時，在商品大圖右側出現放大鏡效果并根據鼠標的位置來改變右側大圖的顯示內容，放大鏡中的內容和鼠標懸停位置的內容相同。該特效的實現效果圖為：showImg(https://...

szysky 2019-08-29 12:56 評論0 收藏0
2017-07-16 前端日報

摘要：前端日報點贊通道精選聽說你沒來騰訊前端求職直播課筆試篇淘寶漏洞修補記一次踩坑記錄中的對象精讀發布中文深入理解筆記塊級作用域綁定架構經驗分享深入理解筆記字符串和正則表達式架構經驗分享深入理解筆記導讀架構經驗分享第期種使用提升應 2017-07-16 前端日報 GitHub點贊通道精選聽說你沒來 JSConf 2017騰訊前端求職直播課——筆試篇淘寶 flexible.js 漏洞修補：...

yeyan1996 2019-08-20 18:03 評論0 收藏0
那是我夕陽下的奔跑--一個萌新的覺醒

摘要：晚上又不想看書屋里光線不好，最近正好在跟著權哥學習和，不如自己寫一個以后能用到的后臺模板來玩玩練練手。把重寫成不太確定，明天去問問權哥，哎呀寫文檔是真的有用把這個文件和文件都拖到網站根目錄下，然后把中的加載框架引導文件改成正確讀取的路徑。今天下班回來走在路上，剛下過雨，又出了太陽。步行從公司到租的房子里，路過人民公園，空氣一度讓人覺的這根本不是鄭州的樣子。公司里有些讓人不快的事情也...

MiracleWong 2019-06-28 13:17 評論0 收藏0