js实现图片局部等比放大
Posted bsys
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现图片局部等比放大相关的知识，希望对你有一定的参考价值。
我们在浏览例如淘宝等网站的时候，经常能见到这样的效果
左边是一张完整的图片，当你的鼠标光标放置在图片上的时候，左边图片会在光标的对应位置产生一个半透明的矩形，在右边会产生一个和左边图片等大的局部放大图。
模拟实现放大镜的效果，今天，我就来说说如何使用js实现这样的效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .s_box,.b_boxwidth:400px;height:300px;position: absolute;top:100px; .s_boxleft:50px; .s_box imgwidth: 400px;height: 300px; .s_box spanposition: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none .b_boxleft:500px;display: none;overflow: hidden .b_box imgwidth: 1200px;height: 900px;position: absolute;left: 0;top:0; </style> </head> <body> <div class="s_box"> <img src="img/img1.jpg" alt=""> <span></span> </div> <div class="b_box"> <img src="img/img1.jpg" alt=""> </div> </body> <script> // OOP:编程 function Magnifier() // 1.选元素 this.sBox = document.querySelector(".s_box"); this.span = document.querySelector(".s_box span"); this.bBox = document.querySelector(".b_box"); this.bImg = document.querySelector(".b_box img"); // 2.绑定事件 this.init() Magnifier.prototype.init = function() var that = this; // 进入 this.sBox.onmouseover = function() // 3-1.显示，计算span的宽高 that.show() // 离开 this.sBox.onmouseout = function() // 3-2.隐藏 that.hide() // 移动 this.sBox.onmousemove = function(eve) var e = eve || window.event; // 5.span跟随鼠标 that.move(e) Magnifier.prototype.show = function() // 显示，计算span的宽高 this.span.style.display = "block"; this.bBox.style.display = "block"; this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px"; this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px"; Magnifier.prototype.hide = function() // 隐藏 this.span.style.display = "none"; this.bBox.style.display = "none"; Magnifier.prototype.move = function(e) // 计算移动的距离 var l = e.clientX - this.sBox.offsetLeft - this.span.offsetWidth/2; var t = e.clientY - this.sBox.offsetTop - this.span.offsetHeight/2; // 边界限定 if(l<0) l=0; if(t<0) t=0; if(l>this.sBox.offsetWidth - this.span.offsetWidth) l=this.sBox.offsetWidth - this.span.offsetWidth if(t>this.sBox.offsetHeight - this.span.offsetHeight) t=this.sBox.offsetHeight - this.span.offsetHeight // span跟随鼠标 this.span.style.left = l + "px"; this.span.style.top = t + "px"; // 计算比例 // 当前值 / 总值，得到的就是比例 var x = l / (this.sBox.offsetWidth - this.span.offsetWidth); var y = t / (this.sBox.offsetHeight - this.span.offsetHeight); // 根据比例计算右边大图应该移动的距离 // 比例 * 总值，得到的就是当前应该移动的距离 this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px"; this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px"; new Magnifier(); </script> </html>
其实这样的效果实现起来是比较简单的，只要我们注意其中比例的配置就基本上没有什么问题了。
以上是关于js实现图片局部等比放大的主要内容，如果未能解决你的问题，请参考以下文章