js实现图片局部放大效果详解

图片局部放大效果结合的知识点主要是数字正射影像图的操作，以及事件的应用，所以首先要对数字正射影像图的操作有一定了解，其次能对事件的应用有一定的累积。

如上图，可以看到，这是放大镜的基本效果，主要分成左右两个部分。左边分成一张大图，和一个导航栏，在右边则是一个放大镜放大后的图片。因此，我在画页面的时候，大体的超文本标记语言结构如下：

body div class=' choose ' div class=' content ' img src=' http : images/small 1。jpg ' id=' small ' div class=' shadow '/div/div ul id=' list show ' Li class=' selected ' img src=' http : images/small 1。jpg ' data-img=' images/big 1。jpg ' alt=' '/Li img src=' http : images/small 2。jpg ' data-img='在这个时候，将静态页面按常规方式进行布局，给予钢性铸铁样式如下：

样式* { padd : 0；保证金： 0；列表样式：无；} .选择{宽度： 400像素高度： 600像素；向左浮动：余量余量：50px 0 0 50px}。内容{宽度： 400像素高度： 400像素；相对位置：} .内容img {宽度： 400px高度： 400像素；} # listshow { width: 400px高度： 100像素；边距-top : 20px；} # listshow li { width: 98px高度： 100像素；向左浮动：border:1px固体# 666;} #列表显示李img { width : 98px高度： 100像素；} #列表显示.选中{边框颜色：棕色；} .更大的{宽度： 400像素高度： 400像素；绝对位置：top: 50pxleft: 500px向左浮动：飞越：隐藏；显示器：无；} #大{ width: 800px高度： 800像素；绝对位置：左： 0；top : 0；} .阴影{宽度： 200像素高度： 200像素；背景-color: rgba(145，200，200，4);绝对位置：左： 0；top : 0；z指数： 10；显示器：无；}/样式那么这个时候，开始写射流研究…样式，分布书写的话，第一步要考虑到左边的选项卡。选项卡我采用直接使用科学研究委员会赋值的方法，将滑过的图片对应的科学研究委员会给大图，代码呈现：

for(var I=0；I shouli . lengthi){ var show item=show Li[I]；显示项目。onmouseover=显示项目。onclick=function(e){ let evt=window。事件| | e；for(var j=0；jshowli . lendej){ show Li[j].className=} var show img=this。getelementsbytagname(' img ')[0]；var img src=显示img。srcsmall . src=imgsrcvar big src=show img。GetAttribute(' data-img ')；big . src=bigsrcthis . class name=' selected } }这样就可以成功实现选项卡功能，比较简单粗暴的一种方式，当然，大家使用挑选结合点击下标和大图下标相等的这一点，也一样可以做出来。

接下来要考虑到，鼠标在大图上移动时，遮罩层的移动效果。值得一提的时候，这个地方其实存在一个视觉上的误区，看起来是在滑动遮罩层，其实是鼠标的滑动，而遮罩层通过获取鼠标的客户x，客户y来确定自己的位置，遮罩层位置获取代码：

content . onmousemove=function(e){ var evt=window . event | | e；biger . style . display=' block '；shadow . style . display=' block '；var CLIENT x=evt . CLIENT x；var CLIENT y=evt . CLIENT y；var scrolleft=document . document element . scrolleft | | document . body . scrolleft；var scroll top=document . document element . scroll top | | document . body . scroll top；var X=clientX scrolleft-chooseMarginL-shadow w/2；var Y=clientY scroll top-choice margint-shadowH/2；if(X=0){ X=0；} if(X=MaxX){ X=MaxX；} if(Y=0){ Y=0；} if(Y=MaxY){ Y=MaxY；}//防止蒙版层粘连，用鼠标滑出大图位置：var bigX=X * bigW/content w；var BigY=Y * BigH/content h；//bigX/bigW=X/contentW，主图和蒙版图层有双重关系，放大图和原图阴影也有双重关系. style . left=X ' px '；shadow . style . top=Y ' px '；big . style . left=-BigX ' px '；big . style . top=-BigY ' px '；}这里有很多计算，特别注意蒙版层阴影、主图、放大图之间的多重关系。

至此，基本功能都实现了，所涉及的计算也可以用图片适当理解，尤其注意获取点击位置。

以上就是边肖介绍的js实现局部图像放大效果的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！