亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

放大鏡效果

Big_fat_cat / 651人閱讀

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

效果：

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

調用：

magnifyGlass("大圖url");

原圖：

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/83622.html

相關文章

  • 仿淘寶的放大鏡效果

    摘要：本次文章的主要內容是介紹一下淘寶的放大鏡效果是如何實現的，相信很多同學們對這個并不陌生。這個看似感覺很復雜的小功能，實際上原理卻是非常的簡單，下面我們學習一下淘寶放大鏡效果是如何實現的。 前言 這一段時間事情挺多的，一直沒有時間寫文章。這兩天稍微閑了一些，就趁這會閑工夫寫一篇文章。本次文章的主要內容是介紹一下淘寶的放大鏡效果是如何實現的，相信很多同學們對這個并不陌生。這個看似感覺很復雜...

    wuyangnju 評論0 收藏0

  • 原生js實現簡單的放大鏡效果

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

    lushan 評論0 收藏0

  • 原生js實現簡單的放大鏡效果

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

    megatron 評論0 收藏0

  • 原生js實現簡單的放大鏡效果

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

    chanjarster 評論0 收藏0

發(fā)表評論

0條評論

Big_fat_cat

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<