原生js实现淘宝放大镜效果

时间：2021-05-25

大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果，例如：把鼠标放在图片上右侧会出现一个放大的预览区域，这就是所谓放大镜效果。今天闲着没事干，就打算复习一下JavaScript基础，用一下基础知识制作一个类似于淘宝的放大镜效果。

先说一下这个效果需要用到的一些基础知识：

css相对定位：position：absolute；

鼠标移入移出以及移动事件：onmouseover、onmouseout、onmousemove，记住这些事件一般不会单个出现

获取鼠标点击坐标：X轴：clientX，Y轴：clientY

当前元素相对于父元素的左位移：offsetLeft

当前元素相对于父元素的上位移：offsetTop

当前元素的实际高、宽度（不包括滚动条）：offsetWidth、offsetHeight

球当前元素的最小值，最大值：Math.min()、Math.max()；

话不多说直接上代码吧！

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>放大镜效果</title><style type="text/css">*{padding: 0;margin: 0;}#demo{display: block;width: 400px;height: 255px;margin: 50px;position: relative;border: 1px solid #ccc;}#float-box{position: relative;z-index: 1;}#small-box{display: none;width: 160px;height: 120px;position: absolute;background: #ffffcc;border: 1px solid #ccc;filter: alpha(opacity=50);opacity: 0.5;cursor: move;}#big-box{display: none;position: absolute;top: 0;left: 460px;width: 400px;height: 300px;overflow: hidden;border: 1px solid #ccc;z-index: 1; }#big-box img{position: absolute;z-index: 5;} </style></head><body><div id="demo"><div id="float-box"><div id="small-box"></div><img src="../images/macbook-small.jpg"></div><div id="big-box"><img src="../images/macbook-big.jpg"></div></div><script type="text/javascript">window.onload = function(){ //获取到需要的元素var demo = document.getElementById('demo');var smallBbox = document.getElementById('small-box');var floatBox = document.getElementById('float-box');var bigBox = document.getElementById('big-box');var bigBoxImg = bigBox.getElementsByTagName('img')[0]; floatBox.onmouseover = function(){smallBbox.style.display = "block";bigBox.style.display = "block";}floatBox.onmouseout = function(){smallBbox.style.display = "none";bigBox.style.display = "none";}floatBox.onmousemove = function(e){var _event = e || event;console.log(_event.clientY);var l = _event.clientX - demo.offsetLeft - floatBox.offsetLeft - smallBbox.offsetWidth/2;//除2是因为让鼠标点出现在放大遮罩的中心位置var t = _event.clientY - demo.offsetTop - floatBox.offsetTop - smallBbox.offsetHeight/2; var demoWidth = demo.offsetWidth;var demoHeight = demo.offsetHeight; var smallBboxWidth = smallBbox.offsetWidth;var smallBboxHeight = smallBbox.offsetHeight;//鼠标可以移动的最大XY的距离var maxX = demoWidth - smallBboxWidth;var maxY = demoHeight - smallBboxHeight; l = Math.min(maxX,Math.max(0,l));t = Math.min(maxY,Math.max(0,t));smallBbox.style.left = l +"px";smallBbox.style.top = t +"px"; var percentX = l / (floatBox.offsetWidth - smallBboxWidth);//求出小图遮罩的坐标占可移动区域的比例var percentY = t / (floatBox.offsetHeight - smallBboxHeight); bigBoxImg.style.left = -percentX *(bigBoxImg.offsetWidth - bigBox.offsetWidth) +"px";//大图对的移动方向和小图遮罩的移动方向相反bigBoxImg.style.top = -percentY*(bigBoxImg.offsetHeight - bigBox.offsetHeight)+"px"; }}</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章