第一部分的原理是：设置框的背景为需要放大的图片，背景的宽高都是100%。然后设置盒子的宽高为300px，让背景图片能填满盒子。然后通过监听盒子的mousemove事件来控制红色小盒子的移动。红色小框是放大的地方，第二部分的原理是：将big中的img设置为框宽的3倍（这里的3倍是放大镜的放大倍数，当然这个值可以自由选择。）。同时大块的宽高都是350px，用来限制img的显示。然后移动img的左侧和顶部，实现放大镜的效果。CSS代码：html,body{边距：0;填充：0；}#box{宽度：300px；高度：300px；位置：相对；背景：网址（12.png）；背景大小：100%100%；}#box#small{宽度：100px；高度：100px；位置：绝对；顶部：0；左：0；背景：红色；不透明度：0.6；：相对的;显示：无；}#bigimg{宽度：900px；高度：900px；位置：绝对；}(2)js部分：varbox=document.querySelector('#box');varsmall=document.querySelector('#small');varbig=document.querySelector('#big');varimg=document.querySelector('#imgs');//监听mousemove事件box.onmousemove=function(e){//获取鼠标的x,y坐标。为什么减去50？为了使鼠标刚好在红色小方块的中心。vartop=e.clientY-50;varleft=e.clientX-50;//限制小方块移出框的范围if(top>200){top=200};如果（顶部<0）{顶部=0}；如果（左>200）{左=200}；如果（左<0）{左=0}；//动态设置小方块的位置，使小方块随鼠标移动small.style.left=left+'px';small.style.top=top+'px';//让大里面的图片随着鼠标的移动而移动。为什么要在这里乘以(-3)？因为big里的大图是box的3倍。如果鼠标在方框上向右移动1px，那么big中的大图必须向左移动(1x-3)px才能达到我们想要的效果。img.style.top=top*(-3)+'px';img.style.left=left*(-3)+'px';}//监听框的onmouseenter事件box.onmouseenter=function(e){//当鼠标进入框范围时，显示放大效果big.style.display='block';}//监听盒子的onmouseleave事件box.onmouseleave=function(e){//当鼠标移出盒子范围时，隐藏放大效果big.style.display='none';}好了，到这里css+js实现放大镜的功能就完成了。这很简单。但这只是一个简单的实现，还有使用canvas实现的方法。动手的不能就不管了，自己敲一下就能明白很多。