【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能:
模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置。
实现效果:
实现代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片放大镜效果</title> <script type="text/javascript" src="../js/jquery-3.2.1.min.js" ></script> <style> .min{ width: 350px; height: 350px; border: 1px solid black; float: left; position: relative; margin: 50px 0 0 30px; } .max{ width: 350px; height: 350px; border: 1px solid black; float: left; display: none; overflow: hidden; position: relative; margin-left:30px ; } .max img{ position: absolute; margin: 0 auto; } .fd{ width: 153.125px; height: 153.125px; background-color: skyblue; opacity: 0.3; position: absolute; top: 0; left: 0; display: none; cursor: move; } </style> </head> <body> <div class="min"> <img src="../img/0.jpg" width="350px" height="350px"/> <div class="fd"></div> </div> <div class="max"> <img src="../img/0.jpg"/> </div> <script> var min = document.querySelector(".min"); var max = document.querySelector(".max"); var img = document.querySelector(".max img"); var fd = document.querySelector(".fd"); min.onmouseover = function(){ // 1.鼠标覆盖显示max和fd max.style.display = "block"; fd.style.display = "block"; } // 离开时隐藏 min.onmouseout = function(){ max.style.display = "none"; fd.style.display = "none"; } // 2. fd的移动范围 min.onmousemove = function(){ // 鼠标触摸的点 var x = event.clientX-min.offsetLeft-fd.offsetWidth/2; var y = event.clientY-min.offsetTop-fd.offsetHeight/2; // 最大移动距离 var maxX = min.clientWidth-fd.offsetWidth; var maxY = min.clientHeight-fd.offsetHeight; // 边界判断 if (x <= 0) { x = 0; }else if (x >= maxX) { x = maxX; } if (y <= 0) { y = 0; }else if (y >= maxY) { y = maxY; } // fd的位置 fd.style.left = x+'px'; fd.style.top = y+'px'; //fd/min = max/img //移动比例 var moveX = x/maxX; var moveY = y/maxY; // 移动 // 3. max的对应显示 // 对于大图而言,放大镜在小图上移动的比例相当于img在可显示区域上移动的比例 // 放大镜右移等于图片左移 // 也就是本质上为img-max 然而而需要负值,则*-1简化后为max-img img.style.left = moveX*(max.clientWidth - img.offsetWidth) + 'px'; img.style.top = moveY*(max.clientHeight - img.offsetHeight) + 'px'; } </script> </body> </html>