js实现鼠标移入图片放大效果
使用原生js编写一个鼠标移入图片放大效果，供大家参考，具体内容如下
目标给图片添加鼠标移动放大方法效果，移到哪里放大哪里
先看看效果是不是你想要的，再看代码
移入前
移入后
html
<!-- css看着写 -->
<div class="Box" style="width:200px;height:200px;border:1px solid #f00;position: relative;top:0;left:0;overflow: hidden;">
<Img src="../image/lingtai.jpg" alt="" style="width:200px;height:200px;position:absolute;left:0;top:0;">
</div>
javascript
// 图片放大镜
// @params Class 目标class string
// @params Scale 放大倍数 number
function ScaleImg(Class, Scale){
this.Box = document.querySelector(Class);
this.Img = this.Box.querySelector('img');
this.scale = Scale || 3 ;
// 盒子中心点
this.BoxX = this.Box.offsetWidth / 2;
this.BoxY = this.Box.offsetHeight / 2;
// 获取盒子初始定位
this.Left = parseFloat( this.Box.offsetLeft );
this.Top = parseFloat(this.Box.offsetTop );
this.Init();
}
ScaleImg.prototype = {
// 鼠标移入
Mouseover: function(e){
var e = e || window.event;
// 放大图片
this.Img.style.width = this.Img.offsetWidth * this.scale + "px";
this.Img.style.height = this.Img.offsetHeight * this.scale + "px";
// 设置放大后的图片定位
this.Img.style.left = (this.Box.offsetWidth - this.Img.offsetWidth) / 2 + "px";
this.Img.style.top = (this.Box.offsetHeight - this.Img.offsetHeight) / 2 + "px";
// 获取图片放大后定位值
this.ImgLeft = parseFloat(this.Img.style.left);
this.ImgTop = parseFloat(this.Img.style.top);
this.Box.left = (this.Box.offsetWidth - this.Img.offsetWidth) / 2;
this.Box.top = (this.Box.offsetHeight - this.Img.offsetHeight) / 2;
// 阻止默认事件
return ;
},
// 鼠标移除
Mouseout: function(e){
var e = e || window.event;
// 重置css
this.Img.style.width = this.Img.offsetWidth / this.scale + "px";
this.Img.style.height =this.Img.offsetHeight / this.scale + "px";
this.Img.style.left = Math.floor((this.Box.offsetWidth - this.Img.offsetWidth) / 2) + "px";
this.Img.style.top = Math.floor((this.Box.offsetHeight - this.Img.offsetHeight) / 2) + "px";
return ;
},
// 鼠标移动
Mousemove: function(e){
var e = e || window.event;
// 图片鼠标位置
var ImgXY = {"x": this.Left + this.BoxX, "y": this.Top + this.BoxY};
// 获取偏移量
var left = (ImgXY.x - e.clientX ) / this.BoxX * this.ImgLeft ,
top = (ImgXY.y - e.clientY) / this.BoxY * this.ImgTop ;
this.Img.style.left = Math.floor(this.Box.left - left) + "px";
this.Img.style.top = Math.floor(this.Box.top - top) + "px";
return ;
},
// 初始化
Init: function(e){
var that = this;
this.Box.onmouseover = function(e){
that.Mouseover(e);
}
this.Box.onmouseout = function(e){
that.Mouseout(e);
}
this.Box.onmousemove = function(e){
that.Mousemove(e);
}
}
}
// 实例一个对象
new ScaleImg('.Box');
