周末忙了两天，什么也没写。 今天先来一篇吧。 这在前端几乎是常见的效果。 今天写吧。
在实现一个需要或效果之前，我们需要明确自己的想法是怎么样的。 有了想法，其他事情也就容易做了。 磨菜刀也一定能砍柴。
要实现放大镜的效果，首先需要大致的效果图。 如上图所示，以下是思路分析。
1 .加载页面后，获取要操作的节点对象(smallBox、tool、bigBox、bigImg等)
2 .鼠标悬停在小盒上时，将显示输出放大镜(tool )，并显示右侧的大盒。
3 .鼠标在小箱子上移动时，“放大镜”(tool )随着鼠标移动)的范围在小箱子里。 右边大箱子里的大照片也会动。
那么，怎样才能实现这样的效果呢？ 再看一张效果分析图可能就很明显了。 如下所示。
右边显示了放大的效果，右边的容器和小工具的大小显示了求出图像需要放大多少倍。 其实，这个原理是小工具在左侧的小箱子上移动，图像按比例放大后显示在右侧的箱子上。 (图像大的箱子小，显示不完整)然后移动小工具，右侧的大图像在右侧的箱子中移动，所以如果小工具的宽度高度例如为100*100，则右侧的大箱子的宽度高度必须按比例设定为400*400 如果左侧的原始图像宽度为300，则它们是在css中设置的。 接下来要求的是图像的移动方法。 上图左侧有div，div中有小工具(黄色背景，移动用)，右侧有div (黄色背景)。 绿色背景是放大后的图像。 a表示小工具的“宽度”，a1表示右侧div的宽度，c表示小工具在左侧div上移动的距离。 然后，请记住c1不会移动箱子，而是在箱子内移动右侧的大图像。 分析一下上面，我们接下来要坐的是二维码。
在我们的前端，如何布局是重要的一步，逻辑再好，布局也不够犀利。
html:
！ -小箱子--divid=' small box ' class=' small box ' divid=' tool ' class=' tool '/div img src=' awe.jpg '//div！ -大箱子--divid=' big box ' class=' big box ' imgid=' big img ' src=' awe.jpg '/div CSS: small box { border 33601 } 位置： absolute； top:100px； left:100px； cursor:move； Overflow :隐藏； }.tool{display:none； width:100px； height:100px； 背景色： gold； 过滤器：阿尔法(Opacity=50 )； opacity:0.5； 位置： absolute； }.smallBox img{width:300px； }.bigBox{display:none； width:400px； height:400px； Overflow :隐藏； 位置： absolute； left:500px； top:100px； border :1 px固态# CCC； }.big box img { position : absolute； width:1200px； }
js :
window.onload=function () varsmallbox=document.getelementbyid (small box )； //小箱子vartool=document.getelementbyid (' tool )； //放大镜var big box=document.getelementbyid (big box )； //大箱子varbigimg=document.getelementbyid (big img )； //大图像//步骤2 :当鼠标悬停在小箱子上时，将显示放大镜(tool )，然后显示右边的大箱子。 small box.onmouseover=function ({ tool.style.display=' block '； //放大镜(tool ) bigBox.style.display='block '； //右边的大箱子会显示出来。 }smallBox.onmouseout=function () {tool.style.display='none '； //放大镜(tool ) bigBox.style.display='none '； //隐藏右边的大箱子。 (//步骤3 )在小箱子上移动鼠标时，放大镜)配合鼠标工作) (范围在小箱子里)。 右侧大箱子中的大图像也移动//offsetWidth offsetHeight以获取节点对象的宽度和高度。 (滚动条除外) small box.onmousemove=function (e ) {var _event=window.e
vent||e; //事件对象//计算放大镜（tool）的x坐标var left = _event.clientX-smallBox.offsetLeft-tool.offsetWidth/2;//计算放大镜（tool）的y坐标var top = _event.clientY-smallBox.offsetTop-tool.offsetHeight/2;//处理left和top值(限制范围)if(left<0){left = 0;}if(top<0){top = 0;}if(left>smallBox.offsetWidth-tool.offsetWidth){left = smallBox.offsetWidth-tool.offsetWidth;}if(top>smallBox.offsetHeight-tool.offsetHeight){top = smallBox.offsetHeight-tool.offsetHeight;}//改变放大镜的一个坐标tool.style.left = left + "px";tool.style.top = top + "px";//求图片应当移动的距离var x = tool.offsetLeft*bigBox.offsetWidth/tool.offsetWidth;var y = tool.offsetTop*bigBox.offsetHeight/tool.offsetHeight;//改变图片移动的距离bigImg.style.left = -x + "px";bigImg.style.top = -y + "px";}}这个逻辑部分使用的完全是纯js，下面给出使用jquery的代码，更简洁：jQuery：$(function(){$("#smallBox").on({mouseenter:function(){$("#tool").css({display:"block"});$("#bigBox").css({display:"block"});},mouseleave:function(){$("#tool").css({display:"none"});$("#bigBox").css({display:"none"})},mousemove:function(e){var cX = e.clientX-$("#smallBox").offset().left-$("#tool").width()/2;var cY = e.clientY-$("#smallBox").offset().top-$("#tool").height()/2;if(cX<0){cX = 0;}if(cX>$("#smallBox").width()-$("#tool").width()){cX = $("#smallBox").width()-$("#tool").width();}if(cY<0){cY = 0;}if(cY>$("#smallBox").height()-$("#tool").height()){cY = $("#smallBox").height()-$("#tool").height();}$("#tool").css({left:cX,top:cY});var x = $("#tool").position().left*$("#bigBox").width()/$("#tool").width();var y =$("#tool").position().top*$("#bigBox").height()/$("#tool").height();$("#bigImg").css({left:-x,top:-y})}})})
好了，大功告成。
但是在实际情况下还会有一个屏幕滚动的高度，我们需要改装这一句，加上$(window).scrollTop()屏幕滚动的高度（jq的写法）。
var cY = e.clientY-$(".bigxiao").offset().top-$("#tools").height()/2 +$(window).scrollTop();