放大鏡效果代碼實現(xiàn)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .magifier {
            margin: 20px auto;
            width: 500px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .magifier .abbre {
            width: 200px;
            height: 200px;
            position: relative;
            box-sizing: border-box;
        }

        .magifier .abbre img {
            width: 100%;
            height: 100%;
        }

        .magifier .abbre .mask {
            position: absolute;
            z-index: 3;
            display: none;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
            border: 1px solid #aaa;
            background: 50% top no-repeat #fede4f;
            opacity: 0.5;
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
            filter: alpha(Opacity=50);
            cursor: move;
        }

        .magifier .detail {
            box-sizing: border-box;
            position: relative;
            /* 為什么此處沒有寬高的時候，小圖展示不全耸采？授舟？妈嘹？ */
            width: 300px;
            height: 300px;
            overflow: hidden;
            display: none;
        }

        .magifier .detail img {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
    </style>
</head>

<body>
    <section class="magifier">
        <!-- 縮略圖 -->
        <div class="abbre">
            <img src="https://img11.360buyimg.com/n1/jfs/t1/175546/26/9058/217713/609b376dEc171ccc5/1f6c5290df3830da.jpg"
                alt="" sizes="" srcset="" />
            <div class="mask"></div>
        </div>
        <!-- 詳情圖 -->
        <div class="detail">
            <img src="https://img11.360buyimg.com//n0/jfs/t1/175546/26/9058/217713/609b376dEc171ccc5/1f6c5290df3830da.jpg"
                alt="" />
        </div>
    </section>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $(function () {
        let $magifier = $(".magifier");
        $abbre = $magifier.find(".abbre");
        $mask = $abbre.find(".mask");
        $detail = $magifier.find(".detail");
        $detailIMG = $detail.find("img");
        let abbreOffset = $abbre.offset(); //abbre的相對于document的偏移具伍，原生的aip為offsetLeft
        // console.log("$magifier", $magifier, $abbre, $mask, $detail, $detailIMG);
        // console.log("mousemove");
        // 計算出大圖的大小
        let abbreW = $abbre.width();
        (abbreH = $abbre.height()),
            (maskW = $mask.width()),
            (maskH = $mask.height()),
            (detailW = $detail.width()),
            (detailH = $detail.height()),
            (detailIMGW = 0),
            (detailIMGH = 0);
        // abbre/mask = detailIMG/detail;
        // abbre*detail/mask = detailIMG;
        detailIMGW = (abbreW * detailW) / maskW;
        detailIMGH = (abbreH * detailH) / maskH;
        // console.log("大圖的寬高為", detailIMGW, detailIMGH);
        $detailIMG.css({
            width: detailIMGW,
            height: detailIMGH,
        });
        // mask的位置
        // 鼠標的位置 - abbre的偏移 - mask的寬高的一半
        // mask不可以超過的邊界
        // 最小的top/left = 0
        // 最大top/left = abbre - mask;
        const computed = function computed(ev) {
            console.log("ev", ev);
            let curLeft = ev.pageX - abbreOffset.left - maskW / 2;
            let curTop = ev.pageY - abbreOffset.top - maskH / 2;
            // 處理邊界情況
            let minL = 0,
                minT = 0,
                maxL = abbreW - maskW,
                maxT = abbreH - maskH;
            curLeft = curLeft < minL ? minL : curLeft > maxL ? maxL : curLeft;
            curTop = curTop < minT ? minT : curTop > maxT ? maxT : curTop;
            $mask.css({
                left: curLeft,
                top: curTop,
            });
            // mask在abbre里面移動的距離/abbre的寬度 = detailIMG在detail移動的距離/detail的寬度
            $detailIMG.css({
                left: -curLeft / abbreW * detailIMGW,
                top: -curTop / abbreH * detailIMGH
            })
        };
        $abbre
            .mouseenter(function (ev) {
                $mask.css("display", "block");
                $detail.css("display", "block");
                computed(ev);
            })
            .mousemove(function (ev) {
                computed(ev);
            })
            .mouseleave(function (ev) {
                $mask.css("display", "none");
                $detail.css("display", "none");
            });
    });
</script>

</html>

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市搪柑，隨后出現(xiàn)的幾起案子薄腻，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 217,277評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件屠列，死亡現(xiàn)場離奇詭異啦逆，居然都是意外死亡，警方通過查閱死者的電腦和手機笛洛，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,689評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門夏志，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人苛让，你說我怎么就攤上這事沟蔑。” “怎么了狱杰？”我有些...
開封第一講書人閱讀 163,624評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵溉贿，是天一觀的道長。經(jīng)常有香客問我浦旱，道長宇色，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,356評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任颁湖，我火速辦了婚禮宣蠕，結果婚禮上，老公的妹妹穿的比我還像新娘甥捺。我一直安慰自己抢蚀，他們只是感情好，可當我...
茶點故事閱讀 67,402評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布镰禾。她就那樣靜靜地躺著皿曲，像睡著了一般。火紅的嫁衣襯著肌膚如雪吴侦。梳的紋絲不亂的頭發(fā)上屋休，一...
開封第一講書人閱讀 51,292評論 1贊 301
城市分裂傳說
那天，我揣著相機與錄音备韧，去河邊找鬼劫樟。笑死，一個胖子當著我的面吹牛织堂，可吹牛的內(nèi)容都是我干的叠艳。我是一名探鬼主播，決...
沈念sama閱讀 40,135評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼易阳，長吁一口氣：“原來是場噩夢啊……” “哼附较！你這毒婦竟也來了？” 一聲冷哼從身側響起潦俺，我...
開封第一講書人閱讀 38,992評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤拒课，失蹤者是張志新（化名）和其女友劉穎徐勃，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體捕发，經(jīng)...
沈念sama閱讀 45,429評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,636評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年很魂，在試婚紗的時候發(fā)現(xiàn)自己被綠了扎酷。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,785評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡遏匆，死狀恐怖法挨，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情幅聘，我是刑警寧澤凡纳，帶...
沈念sama閱讀 35,492評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站帝蒿，受9級特大地震影響荐糜，放射性物質發(fā)生泄漏。R本人自食惡果不足惜葛超，卻給世界環(huán)境...
茶點故事閱讀 41,092評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一暴氏、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧绣张，春花似錦答渔、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,723評論 0贊 22
一樁弒父案沼撕，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至芜飘，卻和暖如春务豺，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背嗦明。一陣腳步聲響...
開封第一講書人閱讀 32,858評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工冲呢，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人招狸。一個月前我還...
沈念sama閱讀 47,891評論 2贊 370
代替公主和親
正文我出身青樓敬拓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親裙戏。傳聞我的和親對象是個殘疾皇子乘凸，可洞房花燭夜當晚...
茶點故事閱讀 44,713評論 2贊 354

放大鏡效果代碼實現(xiàn)

推薦閱讀更多精彩內(nèi)容