为了实现js放大镜效果，首先，放大镜的原理是通过调整移动距离的比率，从左侧的小图像移动小框，并在右侧的预设窗口中显示放大后的部分图像。 (图像可以自己在网上查找，在底部的小编辑中放入原始代码，稍微修改图像地址和css宽度的高度即可使用) )。
让我们先建立html结构
设定两个箱子左右的大小，只要左侧的箱子和图像的大小一致就可以了。 (也可以自己设定。 )分别放入图片)自己自由添加，在第一个盒子里写一个小盒子，以后拖动方便显示哪个部分。
第二部分构建css
这是笔者设置的css。 需要注意的是，设置箱子1中small的透明度，以便可以看到箱子1底部的图像。 箱子2设定宽度和高度，设定溢出隐藏，隐藏多馀的部分。 小编这里在js的末尾设置了用鼠标移动粉色区域和箱子2来显示，所以只写html和css可能效果不太好。
第三，实现js部分，通过移动左右的小框，同步实现左右图像在相反方向上以等比率移动
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title document/title style * { padding 33600； margin:0； } body{ font-size:0； } #box1{ width:350px； height:350px； 浮点：左； position:relative； } #box2{ width:400px； height:400px； Overflow :隐藏； 浮点：左； position:relative； } #small{ width:180px； height:180px； 后台： pink； opacity:0.4； 位置： absolute； top:0； left:0； } #photo{ position:absolute； top:0； left:0； }.active { display :块； } .close{ display:none； }/style/headbodydivid=' box1' img src=' img/small.jpg ' alt=' pho ' id=' jpg ' divid=' small ' class=' clole big.jpg ' alt=' pho ' id=' photo '/divscriptvarbox1=document//节点部分中的box2=document.getelementbyid (box2)，SME 获取photo=document.getelementbyid )、photo ) document.getelement )的var oLeft=0，oTop=0，x=0，y=0，m=0，n box1.onmouseenter=function () /设置移动显示事件box2.className='active '； small.className='active '； } box1.onmouseleave=function () /设置删除隐藏事件box2.className='close '； small.className='close '； }small.onmousedown=function(e )鼠标按下事件x=e.clientX-this.offsetLeft； y=e.clientY-this.offsetTop； document.onmousemove=function (e )设置鼠标移动事件oLeft=e.clientX-x； oTop=e.clientY-y； if(oleft=0) (将小型移动范围设置为框1 oLeft=0； } if (oleft=box1. offsetwidth-small.offsetwidth ) oleft=box1. offsetwidth-small.offsetwidth； (if ) { oTop=0) { oTop=0； } if (otop=box1. offsetheight-small.offsetheight ) otop=box1. offsetheight-small.offsetheight； (m=-) parseint(((photo.offsetwidthx )/box2.offsetWidth ) *oLeft ) )； //核心代码为n=--(parseint () () photo.offsetheighty )/box2.offsetHeight ) *oTop ) ) small.style.left=oletheight photo.style.left=m 'px '； small.style.top=oTop 'px '； photo.style.top=n 'px '； }.bind(this ) document.onmouseup=function(e ) e ) /鼠标删除事件document.onmousemove='null '； document.onmouseup='null '； } }/script/body/html最终实现效果。 当然，这是简易版的放大镜效果，可以在此基础上继续更完美地实现