那是我在夕阳下奔跑。实现电商网站PC详情页图片缩放效果，商品大图右侧会出现放大镜效果，右侧大图显示内容为根据鼠标的位置改变。放大镜中的内容与鼠标悬停位置的内容相同。这个特效的实现效果图是：给商品大图添加鼠标监听事件，首先监听鼠标进入事件，将鼠标放在大图遮罩层和放大图的显示区域为在监控事件中可见。监听鼠标移动事件，先获取相关坐标，获取大图在页面上的相对位置，然后获取鼠标相对于页面的位置，后一个坐标减去前一个坐标，得到位置鼠标相对于大图像。用鼠标坐标值减去遮罩层宽度的一半，得到遮罩层显示的位置。将遮罩层的坐标值乘以放大倍数，得到图片在放大镜中的坐标值，这里设置放大倍数为2。根据这些得到的坐标值设置遮罩层的坐标和放大镜区域的图像坐标。最后添加鼠标离开的监听事件，隐藏鼠标离开商品大图时的遮罩层和放大镜。具体实现代码：//magnify//放大镜的效果，首先获取商品大图div的jQuery对象var$imgWrap=$('.detail-img-main')//监听鼠标进入事件$imgWrap.mouseenter(function(e){//#imgLoc是遮罩层使其显示$('#imgLoc').css('display','block')//.mainfyImg是放大镜显示元素并使其显示$('.manifyImg').css('display','block')})//监听鼠标离开事件$imgWrap.mouseleave(function(e){//当鼠标离开时，隐藏遮罩层$('#imgLoc').css('display','none')//当鼠标离开时隐藏放大镜$('.manifyImg').css('display','none')})//监听鼠标移动事件$imgWrap.mousemove(function(e){//获取商品大图相对于页面的横坐标varimgX=document.getElementById('imgMainWrap').getBoundingClientRect().left//获取产品大图相对于页面OrdinatevarimgY=document.getElementById('imgMainWrap').getBoundingClientRect().top//获取鼠标相对于页面的横坐标商品大图，用鼠标相对页面的横坐标减去商品大图相对页面的坐标varcursorX=e.clientX-imgX//获取鼠标相对于产品大图的垂直坐标varcursorY=e.clientY-imgY//获取遮罩层坐标，106为遮罩层边长的一半varmaskX=(cursorX-106)+'px'varmaskY=(cursorY-106)+'px'//确保遮罩层完整if(cursorX<106){maskX='0px'}elseif(cursorX>310){maskX='200px'}if(cursorY<106){maskY='0px'}elseif(cursorY>310){maskY='200px'}//计算图片在放大镜中的显示位置varmaginfyX=-parseInt(maskX)*2+'px'varmaginfyY=-parseInt(maskY)*2+'px'//设置遮罩层的位置$('#imgLoc').css('left',maskX)$('#imgLoc').css('top',maskY)//设置图片在放大镜中的位置$('.manifyImgimg').css('left',maginfyX)$('.manifyImgimg'.css('top',maginfyY)})下面是HTMLstructdiv.detail-imga(href='javascript:;').detail-img-main#imgMainWrapimg(src='./images/detail/band/b1.jpg')#imgMaindiv#imgLocdiv.manifyImgimg(src='./images/detail/band/b1.jpg')请输入代码查看完整工程并前往我的GitHub，欢迎大家下载、提问和关注。
