我们在电商网站上购买商品时，经常会看到这样的效果。当我们把鼠标放在浏览的商品图片上，在某个区域会有放大镜一样的放大效果，方便消费者观察商品。今天简单的实现了这个技术，实现了图片的放大镜效果。我在代码中解释了代码编写的思路和详细的代码注释，方便读者阅读。请查看代码：

html head meta charset=' UTF-8 ' title document/title style type=' text/CSS ' * { margin :0 px；padding:0px }。小盒子{宽度：300像素高度：300 px左边距left :100 pxmargin-top :100 px；border:1px #ccc固体；cursor:movefloat:left位置：相对；} .小盒img { width:300px高度：300 px} .工具{宽度：150像素高度：150 px背景-颜色：金色；opa city 33600.6 filter : alpha(不透明度=60);位置：绝对；left :0 pxtop :0 pxdisplay : none }。工具。活动{显示：块；} .大盒子{宽度：300像素高度：300 pxborder:1px #ccc固体；飞越：隐藏；float : leftmargin-top :100 px；位置：相对；display:none}。大盒子。活动{显示：块；} .大盒img { width:600px高度：600 px位置：绝对；}/style/head body div class=' small-box ' id=' small-box ' img src=' http : img 1。jpg '/div class=' tool ' id=' tool '/div/div class=' big-box ' id=' BigBox ' img src=' http : img 1。jpg ' id=' big img '/div脚本/*第一步：当页面加载完后，获取所要操作的节点对象。第二步：为smallBox添加一个鼠标浮动事件当鼠标浮动到smallBox可视区域的时候，显示出小黄盒子工具和右边的大盒子（小黄盒子的放大版)bigBox添加活跃的为smallBox添加一个鼠标离开事件隐藏小黄盒子和右边的大盒子去掉活跃的第三步：为smallBox添加一个鼠标移动事件小黄盒子工具要跟着鼠标的坐标移动右边的大盒子里的图片也跟着指定的比例移动*/var小方框=文档。getelementbyid('小盒子')；//小盒子var工具=文档。getelementbyid(' tool ')；//小盒子中的黄色区域var bigBox=文档。getelementbyid(' BigBox ')；//大盒子var big img=文档。getelementbyid(' big img ')；//放大的图片//鼠标进入小盒子区域内，显示黄色区域和大盒子小BOx。onmouseenter=function(){ tool。类名=“工具活动”；大盒子。name='大盒子活动'；} //鼠标离开小盒子区域，不显示黄色区域和大盒子小盒子。onmouselave=function(){ tool。类名=' tool大盒子。名称='大盒子'；} //鼠标在小盒子内移动小BOx。onmousemove=函数(e){ var _ e=window。事件| | e；//事件对象var x=_e.clientX-this.offsetLeft-tool.offsetWidth/2；//事件对象在小盒子内的横向偏移量var y=_e.clientY-this.offsetTop-tool.offsetHeight/2；//竖向偏移量if(x0){ x=0；//当左偏移出小盒子时，设为0 } if(y0){ y=0；//当上偏移出小盒子时，设为0 } if(XT this。偏移工具。offset witth){ x=this。偏移工具。偏移；//当右偏移出小盒子时，设为小盒子的宽度-黄色放大区域宽度} if(ythis。偏置心脏工具。偏移心){ y=这个。偏置心脏工具。偏移心；//当下偏移出小盒子时，设为小盒子的高度-黄色放大区域高度}工具。风格。left=x ' px//黄色放大区域距离小盒子左偏距工具。风格。top=y ' px//黄色放大区域距离小盒子上偏距大img。风格。left=-x * 2 ' px '；//放大图片移动方向相反，偏移距离加倍大img。风格。top=-y * 2 ' px '；}/脚本/正文/html这里，我并没有对代码中钢性铸铁样式，JavaScript行为进行和超文本标记语言结构的分离，方便读者阅读和运行。

有些读者可能会认为offsetX和offsetY属性是直接用来获取事件对象的偏移距离，省略了计算。但在实验过程中，笔者破例，黄色放大区域无法随鼠标稳定移动。笔者认为当时使用offsetX和offsetY时，onmousemove的实现会不断在onmouseover上启动，而onmouseover会产生事件传播，导致在获取offsetX时出现异常。最后，作者采用了上述代码中的方法，可以获得稳定的结果。读者可以自己运行代码并检查效果。下面附上作者的渲染图：

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