放大镜的效果主要包括三个鼠标事件。
1.onmouseover，将鼠标移动到浮动小四边形，显示放大区域；
2.onmousemove、鼠标移动、小方块和放大区域一起移动；
3.onmouseout，用鼠标删除小方块和放大区域后消失。
其实放大镜效果最主要的是小方块和放大区域的比例和位置：
divid=' small _ box ' divclass=' small _ pic ' divid=' float _ box '/div img src='1. png ' alt=' '/div/div miv }img{border: none； }#small_box{width: 350px； height: 175px； border : 1px固态# 666； Overflow :隐藏； position: relative； top:200px； left: 100px； display :在线区块； }.small_Pic img{width: 350px； height: 175px； }#big_box{width: 350px； height: 175px； border : 1px固态# 666； 位置： absolute； top:200px； left: 500px； Overflow :隐藏； 显示：无； }.big_Pic img{width: 1400px； 高： 700 px； 位置： absolute； }#float_box{width: 100px； height: 50px； 背景色： # 000； opacity: 0.5； 位置： absolute； 显示：无； cursor: move； z-index: 99； } js代码：
window.nlad=function(({/*获取页面元素)/var small _ box=document.getelementbyid (small _ box ) )； varfloat _ box=document.getelementbyid (float _ box )； var big _ box=document.getelementbyid (big _ box )； var big _ box _ img=big _ box.getelementsbytagname (img ) )0)； /*移动鼠标时，快进和放大区域为： */small _ box .nmusever=function (e ) { float _ box.style.display=' block '； big_box.style.display='block '； (/)移动鼠标时触发(/small_box.) nm ) usem ) ve=function ) e|||window.event； //e.clientX为启动时指向浏览器页面的鼠标指针的水平坐标varfloat _ box _ left=e.clientx-small _ box.offsetleft-50； //求出鼠标位于浮动层中心的varfloat _ box _ top=e.clienty-small _ box.offsettop-25； var left=float _ box.offsetleft * big _ box _ img.offsetwidth/small _ box.offsetwidth； //上图中的x2值，即图像平移框的左边距vartop=float _ box.offsettop * big _ box _ img.offsetheight/small _ box.offsetheieight //上图中的x2值，即图像平移框的高度big _ box _ img.style.left=-left ' px '； big_box_img.style.top=-top 'px '； /*控制浮动层位于箱体范围*/if(float_box_left0) {float_box.style.left=0； } else if (float _ box _ left (small _ box.offsetwidth-100 ) ) float _ box.style.left=small _ box.of set width }if(float_box_top0) {float_box.style.top=0； } else if (float _ box _ top (small _ box.offsetheight-50 ) ) float _ box.style.top=small _ box.ofsetheight }/*鼠标出现时触发*/small _ box .nmuseut=function ((float _ box.style.display=' none '； big_box.style.display='none '； }虽然实现了效果，但是除数有小数点的偏差，所以效果可能也会有一些偏差，但大致是这样。 最重要的是实现效果的思维逻辑。
推荐网站： http://www.imooc.com/learn/32，放大镜教学视频。
转载于：https://www.cn blogs.com/he yujun--/p/6750039.html