JavaScript仿京东放大镜特效

2022-04-15 10:28:05 来源：易采站长站作者：

本文实例为大家分享了javascript仿京东放大镜的具体代码，供大家参考，具体内容如下

功能需求：

1、分为三个模块
2、鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏两个盒子功 cursor: move; } .big { position: absolute; display: none; left: 410px; top: 0; width: 500px; height: 500px; z-index: 999; overflow: hidden; } .big img { position: absolute; top: 0; left: 0; width: 400px; height: 400px; } </style>  <script src="detail.js"></script> </head> <body> <div class="product"> <div class="preview_img"> <img src="images/xs.jpg" alt="javaScript仿京东放大镜特效" /> <div class="mask"></.offsetHeight / 2; //(4)如果坐标小于0 就让他停在 0 的位置(即超出盒子范围就停止) var egdeX = preview_img.offsetWidth - mask.offsetWidth; var egdeY = preview_img.offsetHeight - mask.offsetHeight; if (maskX <= 0) { maskX = 0; } else if (maskX >= egdeX) { maskX = egdeX; } if (maskY <= 0) { maskY = 0; } else if (maskY >= egdeY) { maskY = egdeY; } mask.style.left = maskX + "px"; mask.style.top = maskY + "px"; //大图片的移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层的最大移动距离 var bigImg = document.querySelector(".bigImg"); //大图片最大移动距离 var bigMax = bigImg.offsetWidth - big.offsetWidth; //大图片的移动距离 x y var bigX = (maskX * bigMax) / egdeX; var bigY = (maskY * bigMax) / egdeY; bigImg.style.left = -bigX + "px"; bigImg.style.top = -bigY + "px"; });});

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