今天小编给大家分享一下怎么用javascript实现放大镜效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
先来看一下效果:
图中的图片选的不是很好,有些糊了,各位可以重新选择图片进行做放大镜案例
这个案例可以分为三个功能模块
鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
2.黄色的遮挡层跟随鼠标功能。
3.移动黄色遮挡层，大图片跟随移动功能。
这是我们的html主体部分:
<div class="product_intro clearfix"> <!-- 预览区域 --> <div class="preview_wrap fl"> <div class="preview_img"> <img src="img/big5.jpg" class="smallImg"> <div class="mask"> </div> <div class="big"> <img src="img/big5.jpg" class="bigImg"> </div> </div> </div></div>接下来是css样式部分，这里要注意放大镜部分大图和小图部分的隐藏雨显示以及定位问题
.preview_wrap { width: 400px; height: 590px; } .preview_img { position: relative; height: 398px; border: 1px solid #CCCCCC; background-color: pink;text-align: center; } .preview_img .smallImg { margin-top: 25%; width: 200px; } .mask { display: none; position: absolute; top: left: 0; width: 300px; height: 300px; background-color: yellow; opacity: .5; border: 1px solid #CCCCCC; cursor: move; } .big { display: none; position: absolute; left: 410px; top: 0; width: 500px; height: 500px; z-index: 999; border: 1px solid #ccc; overflow: hidden;}.big img { position: absolute; top: 0; left: 0;}最后来看javascript部分:
如果重新连接一个javascript页面的话要记得写好<script src="" type="text/javascript" ></script>
并且要加上window.addEventListener('load', function() {},它的作用是当页面全部加载执行完毕后再执行js代码
接下来是代码步骤及思路,并且在js代码里也会标注好
鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能,就是显示与隐藏
2.鼠标移动的时候,让黄色的盒子跟着鼠标来走
3.把鼠标坐标给遮挡层不合适。因为遮当层坐标以父盒子为准。
4.首先是获得鼠标在盒子的坐标
5.之后把数值给遮挡层做为left和top值。盒子高度 300的一半 150
6.此时用到鼠标移动事件，但是还是在小图片盒子内移动。mask移动的距离
7.遮挡层不能超出小图片盒子范围
8.大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
// 整个案例可以分为三个功能模块// 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能// 黄色的遮挡层跟随鼠标功能。// 移动黄色遮挡层，大图片跟随移动功能。 // 1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能// 就是显示与隐藏 // 当页面全部加载执行完毕后再执行js代码window.addEventListener('load', function() { var preview_img = document.querySelector('.preview_img'); var mask = document.querySelector('.mask'); var big = document.querySelector('.big'); //2.当我们鼠标经过 preview_img 就显示和隐藏mask遮挡层和 big 大盒子 preview_img.addEventListener('mouseover', function() { mask.style.display = 'block'; big.style.display = 'block'; }) preview_img.addEventListener('mouseout', function() { mask.style.display = 'none'; big.style.display = 'none'; }) // 黄色的遮挡层跟随鼠标功能。 // 把鼠标坐标给遮挡层不合适。因为遮当层坐标以父盒子为准。 // 首先是获得鼠标在盒子的坐标 // 之后把数值给遮挡层做为left和top值。 // 此时用到鼠标移动事件，但是还是在小图片盒子内移动。 // 2.鼠标移动的时候,让黄色的盒子跟着鼠标来走 preview_img.addEventListener('mousemove', function(e) { //(1).先计算出鼠标在盒子里的坐标 // 先算出鼠标在页面中的坐标,减去盒子距离左侧的距离,就是鼠标在盒子里的坐标 // 但是这里要注意: // 要看他有没有父元素,并且父元素有没有定位 var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; // console.log(x,y) //(2)盒子高度 300的一半 150 // (3)mask移动的距离 var maskX = x - mask.offsetWidth / 2; var maskY = y - mask.offsetHeight / 2; // (4)遮挡层不能超出小图片盒子范围 // 如果小于0,就把坐标设置为0 //遮挡层的最大一定距离,因为都是正方形,所以高也适用 var maskMax = preview_img.offsetWidth - mask.offsetWidth; if (maskX <= 0) { maskX = 0 //如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离 //遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度 } else if (maskX >= maskMax) { maskX = maskMax; } if (maskY <= 0) { maskY = 0; //如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离 //遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度 } else if (maskY >= maskMax) { maskY = maskMax; } mask.style.left = maskX + 'px'; mask.style.top = maskY + 'px'; // 移动黄色遮挡层, 大图片跟随移动功能 // 求大图片的移动距离公式: // 遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离 // 3.大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离 var bigImg = document.querySelector('.bigImg'); //大图 //大图片最大移动距离 var bigMax = bigImg.offsetWidth - big.offsetWidth; //大图片最大移动距离 var bigX = maskX * bigMax / maskMax; var bigY = maskY * bigMax / maskMax; bigImg.style.left = -bigX + 'px'; bigImg.style.top = -bigY + 'px'; }) })以上就是“怎么用javascript实现放大镜效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
