放大镜效果

Big_fat_cat 发布于2019-08-20 17:29 / 548人阅读

摘要：效果大图加载完成事件事件调用大图原图由于原图是竖着的，所以代码里有了针对竖图的处理。。。

效果：

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

原图：

由于原图是竖着的，所以代码里有了针对竖图的处理。。。

GPU云服务器云服务器实现放大镜效果 js放大镜效果 js放大镜效果视频 js实现放大镜效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83622.html

仿淘宝的放大镜效果

摘要：本次文章的主要内容是介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂的小功能，实际上原理却是非常的简单，下面我们学习一下淘宝放大镜效果是如何实现的。前言这一段时间事情挺多的，一直没有时间写文章。这两天稍微闲了一些，就趁这会闲工夫写一篇文章。本次文章的主要内容是介绍一下淘宝的放大镜效果是如何实现的，相信很多同学们对这个并不陌生。这个看似感觉很复杂...

wuyangnju 2019-08-20 18:14 评论0 收藏0
原生js实现简单的放大镜效果

摘要：接下来我们开始实现一下它吧首先了解一下放大镜效果的架构如下图，它由两部分组成。第一部分的原理是设置的为需要放大的图片，同时背景的宽高为。然后通过移动的，来达到放大镜的效果。不过这只是简单的实现，还有使用实现的方法。前言：相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；（1）首先了解一下放大镜效果的html架构：如...

lushan 2019-08-02 16:01 评论0 收藏0
原生js实现简单的放大镜效果

摘要：接下来我们开始实现一下它吧首先了解一下放大镜效果的架构如下图，它由两部分组成。第一部分的原理是设置的为需要放大的图片，同时背景的宽高为。然后通过移动的，来达到放大镜的效果。不过这只是简单的实现，还有使用实现的方法。前言：相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；（1）首先了解一下放大镜效果的html架构：如...

megatron 2019-08-30 14:16 评论0 收藏0
原生js实现简单的放大镜效果

摘要：接下来我们开始实现一下它吧首先了解一下放大镜效果的架构如下图，它由两部分组成。第一部分的原理是设置的为需要放大的图片，同时背景的宽高为。然后通过移动的，来达到放大镜的效果。不过这只是简单的实现，还有使用实现的方法。前言：相信很多同学在浏览购物网站的时候都会用到过放大镜的功能，这个功能在日常的网站也会经常用到。接下来我们开始实现一下它吧；（1）首先了解一下放大镜效果的html架构：如...

chanjarster 2019-08-22 15:44 评论0 收藏0