前言这一段时间事情很多，一直没有时间写文章。 这两天有点闲，在这个空闲时间写文章。 这次文章的主要内容是介绍淘宝放大镜的效果是如何实现的，相信很多学生对此并不陌生。 这个看起来很复杂的小功能，其实原理很简单。 学习淘宝放大镜的效果如何实现吧。
实现工艺项目结构
我们的整个项目结构并不复杂，它由images目录、jquery-3.2.1.min.js、style.css、main.js和index.html等内容组成。
images目录。用于存储项目的照片素材。
jquery-3.2.1.min.js。jQuery库(如果您想熟悉本机JS，请不要选择。
style.css。控制项目css样式文件。
http://控制www.Sina.com /项目逻辑的js文件。
main.js。控制项目dom结构。
材质贴图(small.jpg ) )。
原图(big.jpg ) )。
放大镜背景图(mask_bg.jpg ) ) ) ) ) )。
实现原理
index.html。简称：方框1
放大镜 == 100*100橘色方块简称：害怕孤独的毛皮虾
左窗口 == 200*200蓝色方块简称：方框3
右窗口 == 200*200紫色方块简称：方框4
原图 == 400*400青色方块
一个表达式是方块1的left值(或top值) /方块4的left值)或top值)=(-1 ) *害怕孤独的虾的宽度/方块4的宽度。 应注意的是，区块1的定位父母是害怕孤独的毛皮虾，区块4的定位父母是区块3。 另外，小图的纵横与左窗口的纵横一致。 可以通过根据方形1的top和left值均匀更改方形4的top和left值，使方形部分露出而不可见来实现放大镜效果。
文件内容HTML！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width， initial-scale=1.0 ' meta http-equiv=' x-ua -兼容' content=' ie=edge ' title淘宝放大镜效果/titlelinkrel=' stylessitle headbodydivid=' container ' divclass=' left view ' divclass=' mask '/divimgclass=' small ilass small divdivclass=' right view ' img class=' big img ' src=' images/big.jpg ' alt='放大版'/div/div/bodyscriv
大致原理如下：
.mask 代表 放大镜
.leftView 代表 左窗口
CSS # container { position : relative； }.left view { position : relative； width: 418px； height: 418px； }.smallImg{ max-height: 100%； 最大窗口： 100 %； }.mask{ display: none； 位置： absolute； 背景： URL (./images/mask _ BG.png )； cursor: move； }.right view { position : absolute； LL
eft:458px; top:0; width:418px; height:418px; overflow:hidden; }.bigImg{ position: absolute; top:0; left:0;} JS各模块实现 计算放大镜的长宽这里说明一下我们为什么要动态计算放大镜的长宽，主要原因是原图的长宽是不确定的。但是我们要满足放大镜/右窗口=左窗口/原图,这里左窗口和右窗口的长宽是确定的，所以放大镜的长宽是需要根据原图的长宽进行计算。
function calculateMaskWH(){ var width=$('.leftView').width()/$('.bigImg').width()*$('.rightView').width(); var height=$('.leftView').height()/$('.bigImg').height()*$('.rightView').height(); $('.mask').css({ "width":width, "height":height }); } 监听左窗口mouseover和mouseout事件在鼠标没有悬浮在左窗口时，放大镜、右窗口和原图是不可见的。当鼠标悬浮在左窗口之上时，放大镜、右窗口和原图是可见的。
//监听鼠标mouseover事件 $('.leftView').on('mouseover',function(){ $('.mask').css('display','block'); $('.rightView').css('display','block'); }); //监听鼠标mouseout事件 $('.leftView').on('mouseout',function(){ $('.mask').css('display','none'); $('.rightView').css('display','none'); }); 监听左窗口mousemove事件监听mousemove事件，我们需要干两件事。第一件事，动态改变放大镜的top值和left值。第二件事是根据放大镜的top值和left值，等比例修改原图的top值和left值。因此我们这里的难点就是如何计算top值和left值。另外，我们要保证放大镜不能出界。
$('.leftView').on('mousemove',function(event){ //计算放大镜的left值和top值 var left=event.pageX-$(this).offset().left-$('.mask').width()/2; var top=event.pageY-$(this).offset().top-$('.mask').height()/2; //判断放大镜左右是否出界 if(left<0){ left=0 }else if(left>$(this).width()-$('.mask').width()){ left=$(this).width()-$('.mask').width(); } //判断放大镜上下是否出现 if(top<0){ top=0; }else if(top>$(this).height()-$('.mask').height()){ top=$(this).height()-$('.mask').height(); } $('.mask').css({ left:left+'px', top:top+'px' }); //计算比例 var rate=$('.bigImg').width()/$('.leftView').width(); $('.bigImg').css({ left:-rate*left+'px', top:-rate*top+'px' }); }); JS完整代码 $(function(){ //计算放大镜的长宽 calculateMaskWH(); //监听鼠标mouseover事件 $('.leftView').on('mouseover',function(){ $('.mask').css('display','block'); $('.rightView').css('display','block'); }); //监听鼠标mouseout事件 $('.leftView').on('mouseout',function(){ $('.mask').css('display','none'); $('.rightView').css('display','none'); }); $('.leftView').on('mousemove',function(event){ //计算放大镜的left值和top值 var left=event.pageX-$(this).offset().left-$('.mask').width()/2; var top=event.pageY-$(this).offset().top-$('.mask').height()/2; //判断放大镜左右是否出界 if(left<0){ left=0 }else if(left>$(this).width()-$('.mask').width()){ left=$(this).width()-$('.mask').width(); } //判断放大镜上下是否出现 if(top<0){ top=0; }else if(top>$(this).height()-$('.mask').height()){ top=$(this).height()-$('.mask').height(); } $('.mask').css({ left:left+'px', top:top+'px' }); //计算比例 var rate=$('.bigImg').width()/$('.leftView').width(); $('.bigImg').css({ left:-rate*left+'px', top:-rate*top+'px' }); }); //计算机放大镜的长宽 function calculateMaskWH(){ var width=$('.leftView').width()/$('.bigImg').width()*$('.rightView').width(); var height=$('.leftView').height()/$('.bigImg').height()*$('.rightView').height(); $('.mask').css({ "width":width, "height":height }); }}); 最终效果演示