本文主要是介绍js 放大镜，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
放大镜
具体代码
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.min_img{/*1920 x 1080*/width: 480px;height: 270px;background-image: url(img/large.jpg);background-size: 100%;position: relative;}.fdj{width: 140px;height: 100px;background: #ccc;opacity: 0.4;position: absolute;display: none;}.max_img{/*1920 x 1080*/width: 480px;height: 270px;overflow: hidden;border: 1px solid red;display: none;}</style></head><body><div class="min_img"><div class="fdj"></div></div><div class="max_img"><img src="img/large.jpg"/></div></body><script type="text/javascript">var ofdj=document.getElementsByClassName('fdj')[0];var omin_img=document.getElementsByClassName('min_img')[0];var omax_img=document.getElementsByClassName('max_img')[0];document.onmousemove=function(e){var e=e||window.event;l=e.clientX-ofdj.offsetWidth/2;t=e.clientY-ofdj.offsetHeight/2;if(l<0){l=0;}if(t<0){t=0;}if(l>omin_img.offsetWidth-ofdj.offsetWidth){l=omin_img.offsetWidth-ofdj.offsetWidth;}if(t>omin_img.offsetHeight-ofdj.offsetHeight){t=omin_img.offsetHeight-ofdj.offsetHeight;}ofdj.style.left=l+'px';ofdj.style.top=t+'px';omax_img.scrollLeft=l*4;omax_img.scrollTop=t*4;}omin_img.onmouseover=function(){ofdj.style.display='block';omax_img.style.display='block'}omin_img.onmouseout=function(){ofdj.style.display='none';omax_img.style.display='none';}</script>
</html>
效果图
这篇关于js 放大镜的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
