图片放大镜插件的JS实现

序

我们都经常访问各种电商网站，产品的细节需要用放大镜。这对每个人来说都不陌生。今天我们将制作一个图片放大镜的插件，看看图片是如何放大的.

让我们来看看如果我们实现了，最终的效果是什么

看完效果，有什么想法吗？如果没有，我们来看看是如何实现的~

1实施思路

(1)为了达到指向后放大的效果，我们需要制作三个div，一个放原始图片，一个放放大的div，最后一个是指向后需要放大的div(我们用p标签代替这个div)。

确定放大倍率，最重要的一点是鼠标手指上的div要等于放大效果的div，原始图像和放大图像的比例要相等。

向上指鼠标后显示放大效果。

2具体实施步骤

首先，让我们建三个草皮。

div id='包装'！-缩略图-div id=' img _ min '！-image-img src=' http : img/11 . png ' alt=' min '！-鼠标后面的白色块-p id=' mousebeg'/p/div！-更大的图像-div id=' img _ max ' img id=' img 2 _ img ' src=' http : img/11 . png ' alt=' max '/div/div。我们已经完成了所有的HTML代码部分。接下来，我们使用JS来实现这些功能：

在原始图片中添加三个事件，即鼠标输入、鼠标移动和鼠标移除。

当鼠标移动到原始图片中时，鼠标指向上方时的div和放大效果的div同时显示。

Img1.onmouseover=function () {//用鼠标输入img 2 . style . display=' block '；mouse BG . style . display=' block '；}鼠标移出事件：

Img1.onmouseout=function () {//鼠标离开img 2 . style . display=' none '；mouse BG . style . display=' none '；}重点是在鼠标移动时，根据P标签和原图像的位置显示大图像的放大部分。

var _ event=event | | window.event//兼容性处理varmousex=_ event . client x-img 1 . offset ref；//计算鼠标相对于小图片的位置。Varmousey=_ event。clienti-im G1。偏移；进行职位分析时，需要考虑四种关键情况：

即当鼠标刚从图片的上、下、左、右进入，距离小于鼠标手指上div宽度的一半时，显示放大效果的div，不移动。

//特殊情况处理，if (mousexmousebg。offset twisth/2){ mouseX=mousebg.offsetWidth/2;当它们分别靠近四边时} if(mouseximg1 . offset twisth-mousebg . offset twisth/2){ mouseX=img1.offsetWidth-mousebg.offsetWidth/2; } if(mouseymousbg . offset heat/2){ mouseY=mousebg.offsetHeight/2; } if(mouseyimg1 . offset heat-mousebg . offset heat/2){ mouseY=img1.offsetHeight-mousebg.offsetHeight/2; }最后，计算大图的显示范围：

//计算大图像img 2 _ img . style . left=-mul * mousex img2.offsetWidth/2' px '的显示范围；img 2 _ img . style . top=-mul * Mousey img2.offsetHeight/2 ' px '；//使鼠标位于白色块mousebg的中间。风格。左=mouseX-mousebg.offsetWidth/2' px '；mousebg . style . top=mouseY-mousebg.offsetHeight/2“px”；这样，我们用JS实现了图片放大镜的插件。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。