放大鏡效果

Big_fat_cat 發(fā)布于2019-08-20 17:29 / 601人閱讀

摘要：效果大圖加載完成事件事件調(diào)用大圖原圖由于原圖是豎著的，所以代碼里有了針對(duì)豎圖的處理。。。

效果：

HTML：


    ");
    bigImgEle.css({
        position: "absolute",
        zIndex: 2,
        left: 0,
        top: 0
    });
    // 大圖加載完成
    bigImgEle[0].onload = function() {
        var bigImgWth = this.width,
            bigImgHgt = this.height;
        mgEle.append(bigImgEle);
        // 事件
        $(".zh-plane-profile").mouseenter(function(e) {
            var imgWth = $(this).height(),
                imgHgt = $(this).width(),
                imgOffetLeft = $(this).offset().left,
                imgOffetTop = $(this).offset().top;
            mgEle.css({
                left: e.clientX-mgEleWth/2,
                top: e.clientY-mgEleHgt/2
            });
            if($("#"+mgEleId).size() == 0) {
                $("body").append(mgEle);
            }
            // 事件
            $(document).on("mousemove", function(e) {
                var endX = e.clientX,
                    endY = e.clientY;
                if(endXimgWth+imgOffetLeft || endYimgHgt+imgOffetTop) {
                    $("#"+mgEleId).remove();
                    $(document).off("mousemove");
                } else {
                    var translateX = -(endX-imgOffetLeft)/imgWth*bigImgHgt+mgEleWth/2,
                        translateY = -(bigImgWth-(endY-imgOffetTop)/imgHgt*bigImgWth-mgEleHgt/2);
                    $("#"+mgEleId).css({
                        left: endX-mgEleWth/2,
                        top: endY-mgEleHgt/2
                    });
                    $("#"+mgEleId+" img").css({
                        transform: "translate("+translateY+"px, "+translateX+"px)"
                    });
                }
            });
        });
    }
}

調(diào)用：

magnifyGlass("大圖url");

原圖：

由于原圖是豎著的，所以代碼里有了針對(duì)豎圖的處理。。。

云服務(wù)器 GPU云服務(wù)器實(shí)現(xiàn)放大鏡效果 js放大鏡效果 js放大鏡效果視頻 js實(shí)現(xiàn)放大鏡效果

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83622.html

相關(guān)文章

仿淘寶的放大鏡效果

摘要：本次文章的主要內(nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的，相信很多同學(xué)們對(duì)這個(gè)并不陌生。這個(gè)看似感覺很復(fù)雜的小功能，實(shí)際上原理卻是非常的簡單，下面我們學(xué)習(xí)一下淘寶放大鏡效果是如何實(shí)現(xiàn)的。前言這一段時(shí)間事情挺多的，一直沒有時(shí)間寫文章。這兩天稍微閑了一些，就趁這會(huì)閑工夫?qū)懸黄恼隆１敬挝恼碌闹饕獌?nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的，相信很多同學(xué)們對(duì)這個(gè)并不陌生。這個(gè)看似感覺很復(fù)雜...

wuyangnju 2019-08-20 18:14 評(píng)論0 收藏0
原生js實(shí)現(xiàn)簡單的放大鏡效果

摘要：接下來我們開始實(shí)現(xiàn)一下它吧首先了解一下放大鏡效果的架構(gòu)如下圖，它由兩部分組成。第一部分的原理是設(shè)置的為需要放大的圖片，同時(shí)背景的寬高為。然后通過移動(dòng)的，來達(dá)到放大鏡的效果。不過這只是簡單的實(shí)現(xiàn)，還有使用實(shí)現(xiàn)的方法。前言：相信很多同學(xué)在瀏覽購物網(wǎng)站的時(shí)候都會(huì)用到過放大鏡的功能，這個(gè)功能在日常的網(wǎng)站也會(huì)經(jīng)常用到。接下來我們開始實(shí)現(xiàn)一下它吧；（1）首先了解一下放大鏡效果的html架構(gòu)：如...

lushan 2019-08-02 16:01 評(píng)論0 收藏0
原生js實(shí)現(xiàn)簡單的放大鏡效果

摘要：接下來我們開始實(shí)現(xiàn)一下它吧首先了解一下放大鏡效果的架構(gòu)如下圖，它由兩部分組成。第一部分的原理是設(shè)置的為需要放大的圖片，同時(shí)背景的寬高為。然后通過移動(dòng)的，來達(dá)到放大鏡的效果。不過這只是簡單的實(shí)現(xiàn)，還有使用實(shí)現(xiàn)的方法。前言：相信很多同學(xué)在瀏覽購物網(wǎng)站的時(shí)候都會(huì)用到過放大鏡的功能，這個(gè)功能在日常的網(wǎng)站也會(huì)經(jīng)常用到。接下來我們開始實(shí)現(xiàn)一下它吧；（1）首先了解一下放大鏡效果的html架構(gòu)：如...

megatron 2019-08-30 14:16 評(píng)論0 收藏0
原生js實(shí)現(xiàn)簡單的放大鏡效果

摘要：接下來我們開始實(shí)現(xiàn)一下它吧首先了解一下放大鏡效果的架構(gòu)如下圖，它由兩部分組成。第一部分的原理是設(shè)置的為需要放大的圖片，同時(shí)背景的寬高為。然后通過移動(dòng)的，來達(dá)到放大鏡的效果。不過這只是簡單的實(shí)現(xiàn)，還有使用實(shí)現(xiàn)的方法。前言：相信很多同學(xué)在瀏覽購物網(wǎng)站的時(shí)候都會(huì)用到過放大鏡的功能，這個(gè)功能在日常的網(wǎng)站也會(huì)經(jīng)常用到。接下來我們開始實(shí)現(xiàn)一下它吧；（1）首先了解一下放大鏡效果的html架構(gòu)：如...

chanjarster 2019-08-22 15:44 評(píng)論0 收藏0