javascript淘宝主图放大镜功能

工欲善其事，必先利其器。想要实现某一种效果，我们必须要先了解其中的原理。放大镜的功能就是通过获取鼠标在小图中的位置，然后根据大小图的尺寸比例换算出大图需要显示的部分，然后使用定位让大图要显示的部分出现在右边的边框内。然后看代码，根据代码看讲解会更容易理解。

超文本标记语言部分

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title放大镜效果/title link rel='样式表href='放大镜。CSS '/头体div id='包装器！-小图- div id='img_min '！-图片-img src=' http :测试。jpg ' alt=' min '！-跟随鼠标的白块- p id='mousebg'/p /div！-大图-div id=' img _ max ' img id=' img 2 _ img ' src=' http : test。jpg ' alt=' max '/div/div脚本类型=' text/JavaScript ' src=' http :放大镜。js '/脚本/正文/html CSS部分

* { margin : 0；padd : 0；} div { position : relative } div div { width : 300 pxh three : 300 px向左浮动：余量： 100像素飞越：隐藏；} # img _ minimg {/*显示：块；*/宽度： 300 px} # img _ max { display : none } # img _ maximg { position : absolute；top : 0；左： 0；显示器：块；宽度： 1500像素；} # mousebg { display:无绝对位置：宽度： 60px高度： 60px背景-color: rgba(255，255，255，7);top : 0；左： 0；} 最重要的爪哇岛描述语言部分

窗户。onload=function(){ var img 1=document。getelementbyid(' img _ min ')；//小图盒子var img 2=文档。getelementbyid(' img _ max ')；//大图盒子var img 2 _ img=文档。getelementbyid(' img 2 _ img ')；//大图图片var wrap=文档。getelementbyid(' wrap ')；var mousebg=文档。getelementbyid(' mousebg ')；//鼠标白块var mul=5；//当某一个模块dispaly:none的时候不能使用在中间获取它的宽高img1.onmouseover=function () { //鼠标进入img 2。风格。display=" block鼠标BG。风格。display=' block} img1.onmouseout=function () { //鼠标离开img 2。风格。显示='无'；鼠标BG。风格。显示='无'；} img 1。onmousemove=function(event){ var _ event=event | | window。事件；//兼容性处理var mouseX=_ event。客户端包装。offsetleft-img 1。offsetleft//计算鼠标相对与小图的位置var mouseY=_ event。客户服务。偏移位置-img 1。偏移；//特殊情况处理，分别靠近四条边的时候if(mousexmousebg。offset with/2){ mouseX=mousebg.offsetWidth/2; } if(mousexi G1。offsetwith-mousebg。offset with/2){ MouseX=img1.offsetWidth-mousebg.offsetWidth/2; } if(Mouseymusebg。offset heat/2){ mouseY=mousebg.offsetHeight/2; } if(mouseyimg1。偏置热鼠标bg。偏移热量/2){ Mousey=img1.offsetHeight-mousebg.offsetHeight/2; }//计算大图的显示范围img 2 _ img。风格。left=-mul * mouseX img2.offsetWidth/2 ' px '；img 2 _ img。风格。top=-mul * Mousey img2.offsetHeight/2 ' px '；//使鼠标在白块的中间mousebg。风格。左=mouseX-mousebg.offsetWidth/2"px";mousebg。风格。top=mouseY-mousebg.offsetHeight/2"px";} }如果你看完代码和注释已经理解了，用李云龙的一句话说："哎呀，你小子tnd还真是个天才"。那么下面的解析部分你快速的浏览完就好了。

解析部分：

超文本标记语言和钢性铸铁部分都是简单的布局代码，不再讲解，js部分代码也比较简单，我们直接讲解鼠标移动事件部分的代码。首先用一张图来解释一下获取鼠标相对与小图位置的原理：

我们可以看到，通过代码中的操作，我们得到的值是鼠标相对于img1左上角的值。了解了这一步之后，其实可以说我们的工作已经完成了一半。然后，我们跳过特殊情况的处理，直接进行定位正确图片的基本操作。因为offset with，offset thight，style.width和style.height被使用，style.width和style.height的范围与offset with和offset thight相同。其他区别将在另一篇博客中详细描述。我们先用一张图片来了解这些属性，并与上面的属性(图片来自互联网，侵删)进行对比

然后我们解释代码：

右边大画框中的图片位于使用style.left的大画框中，负号是因为我们鼠标的移动方向正好与大画框中图片的移动方向相反。mul是根据大图和小图的大小计算出来的比例。-mul*mouseX实际上是图片在大画框中的相对位置，但是此时你会发现你右边鼠标的位置是在画框的左上角，所以我们需要添加一个img2.offsetWidth/2来让。同样，我们应该在纵坐标上做同样的处理。

//计算大图像img 2 _ img . style . left=-mul * mousex img2.offsetWidth/2' px '的显示范围；img 2 _ img . style . top=-mul * Mousey img2.offsetHeight/2 ' px '；接下来，我们将处理特殊情况。当你做上一步的时候，你会发现当鼠标移动到边缘的时候，鼠标的小白块有时候会跑出图片范围，所以我们会进行处理，限制在图片范围内。因为鼠标在白色透明块的中间，所以我们只是将鼠标限制在距离图片框上下左右白色块长度/宽度一半的位置。

//特殊情况处理，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; }当左边的距离小于宽度的一半时，我们让mouseX等于宽度的一半，这样白色块就不会继续完成这一步后，我们的效果就完成了。ps:的抽象部分可以通过画图来理解。

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