Javaｓｃｒｉｐｔ淘宝主地图放大功能
锋利的工具做出好的工作u3002to达到一定的效果，我们必须首先理解原理。放大镜的功能是在小地图中获取鼠标的位置，然后根据大小图的大小和比例转换所需显示的部分，然后使用位置将部分显示在右边框上。
然后看看代码，根据代码更容易理解解释。
HTML的一部分
放大镜效果
CSS部分
* {
保证金：0；
填充：0；
}
div {
职位：相对；
}
div
宽度：300px；
身高：300px；
浮点数：左；
保证金：100px；
溢出：隐藏；
}
# img_min > img {
显示：*块；
宽度：300px；
}
# img_max {
显示：无；
}
# img_max > img {
位置：绝对；
顶部：0；
左：0；
显示块；
宽度：1500px；
}
# mousebg {
显示：无；
位置：绝对；
宽度：60px；
身高：60px；
背景颜色：RGBA（255255255。7）；
顶部：0；
左：0；
}
Javaｓｃｒｉｐｔ中最重要的部分
在window.onload =函数（）{
无功img1 = document.getelementbyid（'img_min '）； / /小画箱
VaR IMG2 = document.getelementbyid（'img_max '）； / /大盒
无功img2_img = document.getelementbyid（'img2_img '）； / /大图片
VaR套= document.getelementbyid（'wrapper）；
无功mousebg = document.getelementbyid（'mousebg '）； / /白老鼠
无功多= 5；
/ /当一个模块的显示：没有不能用offsetwidth得到它的宽度和高度
img1.onmouseover =函数（）{
鼠标输入
img2.style.display =阻止；
mousebg.style.display =阻止；
}
img1.onmouseout =函数（）{
左鼠标
img2.style.display =不关；
mousebg.style.display =不关；
}
img1.onmousemove =函数（事件）{
无功_event =事件| | window.event； / /兼容性
VaR mouseX = _event.clientx - wrap.offsetleft - img1.offsetleft；
具有小相对计算图位置的鼠标
var = _event.clienty - wrap.offsettop - img1.offsettop老鼠；
特殊事件接近四个边缘。
如果（mouseX < mousebg。offsetwidth / 2）{
mousebg mouseX =。offsetwidth / 2；
}
如果（mouseX > img1。offsetwidth mousebg。offsetwidth / 2）{
img1 mouseX =。offsetwidth mousebg offsetwidth / 2；
}
如果（像老鼠的< mousebg。offsetheight / 2）{
老鼠= mousebg offsetheight / 2；
}
如果（像老鼠的> img1。offsetheight mousebg。offsetheight / 2）{
老鼠= img1。offsetheight mousebg offsetheight / 2；
}
显示范围以扩大计算范围
img2_img.style.left =多* mouseX + img2. offsetwidth / 2 +PX；
img2_img.style.top =多*鼠标+ img2. offsetheight / 2 +PX；
在中间/白块鼠标
mousebg.style.left = mouseX mousebg。offsetwidth / 2 +PX；
mousebg.style.top =老鼠mousebg。offsetheight / 2 +PX；
}
}
如果你已经读过的代码和注释已经了解的，用李云龙的话说：嗯，你的孩子他娘的真是个天才。其次是好的解析。
解析部分：
html和css部分都是简单的布局代码，不再解释了，js的部分代码也比较简单，我们直接解释了鼠标运动的部分代码。
首先，用一个图形来解释获取鼠标相对和小图片位置的原理：
你可以看到，我们可以通过运行代码中的值是相对的img1鼠标左上角的值。
在理解了这一步之后，我们实际上可以说我们的工作已经完成了一半。
然后，我们首先跳过特殊情况，直接进行右侧图像位置的基本操作。
因为它是offsetwidth，offsetheight有用，style.width和style.height属性。style.width，style.height，offsetwidth和offsetheight具有相同的范围。我将在另一个博客中对它们进行不同的描述。让我们先了解这些属性的图片，然后与上面的一些属性（图片来自互联网，删除）进行比较。
然后我们将解释代码：
大盒的位置使用style.left定位图像右镜框，因为老鼠的踪迹的运动方向，我们只是大框架图在相反的方向运动，多是根据大、小地图的比例计算，计算多* mouseX实际上是一个图片在图片框的相对位置，但这一次，你会发现你的鼠标光标在箱子的左上角在右边，所以我们需要添加一个img2. offsetwidth / 2使画面显示中心。和我们做同样的处理在纵坐标。
显示范围以扩大计算范围
img2_img.style.left =多* mouseX + img2. offsetwidth / 2 +PX；
img2_img.style.top =多*鼠标+ img2. offsetheight / 2 +PX；
我们做如下的一个特殊的情况，所以当最后一步，你会发现，当鼠标移动到边缘的范围，小白鼠有时跑出来的画面，所以我们必须在图片处理范围有限，因为鼠标在白色透明块中间，我们将限制在上述距离和画面位置1 / 2白块长度/宽度低于鼠标。
特殊事件接近四个边缘。
如果（mouseX < mousebg。offsetwidth / 2）{
mousebg mouseX =。offsetwidth / 2；
}
如果（mouseX > img1。offsetwidth mousebg。offsetwidth / 2）{
img1 mouseX =。offsetwidth mousebg offsetwidth / 2；
}
如果（像老鼠的< mousebg。offsetheight / 2）{
老鼠= mousebg offsetheight / 2；
}
如果（像老鼠的> img1。offsetheight mousebg。offsetheight / 2）{
老鼠= img1。offsetheight mousebg offsetheight / 2；
}
当距离小于1 / 2的宽度，我们让mouseX等于1 / 2宽，这提示将不会继续在其他三个方向移动。
通过这一步，我们的所有效果都完成了。
抽象的地方可以通过绘画帮助理解。
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。