原生js实现图片放大镜效果

CoXie 发布于2019-08-20 18:20 / 432人阅读

摘要：放大镜原理放大镜的实现过程是将一个小图放置在一个盒子里。右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。右侧大图盒子中放置的是一张大的图片，然后盒子设置成溢出隐藏。

放大镜原理

放大镜的实现过程是将一个小图放置在一个盒子里。宽高都是100%。当鼠标在小图盒子里移动时，出现一个移动块(阴影区域)。右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容。如图(请勿过于认真看图片，注意圈圈(￢_￢))：

一定要理解上图中圈起来的阴影块是箭头指向的粉红色圈的等比缩小版。理解了这个在接下来的代码中，我们才知道怎么去计算右侧大图区域中的left、top值。也可以说成阴影移动块是模拟右侧大图盒子。右侧大图盒子中放置的是一张大的图片，然后盒子设置成溢出隐藏。而我们的移动块也是，不在阴影块中的内容，你都可以认为是溢出隐藏掉了。

当小图盒子中的移动块移动时，根据移动的距离去计算右侧大图盒子中图片移动的坐标。此时方便理解，你可以想像成阴影块是静止的，是阴影块下面的图片在移动。所以，我们需要计算出图片向x轴、y轴移动了多少，根据等比例公式换算出右侧大图盒子中的图片需要移动的坐标值。

代码分析

html




    放大镜

css

移动块行为分析

当鼠标移动到小图盒子中时，会出现移动块（下图阴影部分）我们需要做的是移动块位于鼠标的中间，且跟随鼠标移动。当然了也不能溢出边界。看图说话(￢_￢)

再看看代码：

// 计算move移动块的left值
var move_left = event.clientX - this.offsetLeft - move.offsetWidth/2;
// 计算move移动块的top值
var move_top = event.clientY - this.offsetTop - move.offsetHeight/2;

ok，完美解决 ʅ（´◔౪◔）ʃ

计算放大区域图片left/top值

上面说过了，移动块模拟的是放大区域。所以此时移动块与放大区域的盒子，移动块中的图片大小与放大区域盒子图片大小应该是成比例的。

/*
    计算图片需要移动的坐标
    big_x/(look_girl.offsetWidth-big.offsetWidth) = move_left/(small.offsetWidth-move.offsetWidth);
    big_y/(look_girl.offsetHeight-big.offsetHeight) = move_top/(small.offsetHeight-move.offsetHeight);
*/

var big_x = move_left/(small.offsetWidth-move.offsetWidth) * (look_girl.offsetWidth-big.offsetWidth);
var big_y = move_top/(small.offsetHeight-move.offsetHeight) * (look_girl.offsetHeight-big.offsetHeight);

此时小图盒子的宽度（small.offsetWidth）正好是移动块中图片的宽度（认为不在移动块中显式的图片都溢出隐藏了）。然后就好像没有什么要解释的了...

云服务器 GPU云服务器原生js实现放大镜 js实现放大镜效果图片放大缩小效果js js图片变焦放大效果

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

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

原生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
仿淘宝的放大镜效果

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

wuyangnju 2019-08-20 18:14 评论0 收藏0