这篇文章主要介绍了js实现图片局部放大效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
图片局部放大效果结合的知识点主要是DOM的操作，以及事件的应用，所以首先要对DOM的操作有一定了解，其次能对事件的应用有一定的累积。
如上图，可以看到，这是放大镜的基本效果，主要分成左右两个部分。左边分成一张大图，和一个导航栏，在右边则是一个放大镜放大后的图片。因此，我在画页面的时候，大体的HTMl结构如下：
在这个时候，将静态页面按常规方式进行布局，给予css样式如下：
那么这个时候，开始写js样式，分布书写的话，第一步要考虑到左边的选项卡。选项卡我采用直接使用src赋值的方法，将滑过的图片对应的src给大图，代码呈现：
for(var i = 0;i
这样就可以成功实现选项卡功能，比较简单粗暴的一种方式，当然，大家使用selected结合点击下标和大图下标相等的这一点，也一样可以做出来。
接下来要考虑到，鼠标在大图上移动时，遮罩层的移动效果。值得一提的时候，这个地方其实存在一个视觉上的误区，看起来是在滑动遮罩层，其实是鼠标的滑动，而遮罩层通过获取鼠标的clientX，clientY来确定自己的位置，遮罩层位置获取代码：
content.onmousemove = function (e) { var evt = window.event||e; larger.style.display = "block"; shadow.style.display = "block"; var clientX = evt.clientX; var clientY = evt.clientY; var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var X = clientX+scrollLeft-chooseMarginL-shadowW/2; var Y = clientY+scrollTop-chooseMarginT-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/contentW; var bigY = Y*bigH/contentH; // bigX / bigW = X / contentW,主图和遮罩层之间存在两倍关系，放大图和原图之间也有两倍关系 shadow.style.left = X+"px"; shadow.style.top = Y+"px"; big.style.left = -bigX+"px"; big.style.top = -bigY+"px"; }在这里，计算较多，尤其要注意遮罩层阴影，主图以及放大图之间的倍数关系。
到这里，基本功能就实现了，这里面涉及的计算可以适当配图理解，尤其注意点击位置的获取。
以上就是js实现图片局部放大效果详解的详细内容，更多请关注0133技术站其它相关文章！
