js实现鼠标移入图片放大效果

第js实现鼠标移入图片放大效果给图片添加鼠标移动放大方法效果，移到哪里放大哪里

先看看效果是不是你想要的，再看代码

移入前

移入后

html

!--css看着写--

div

Img

src="../image/lingtai.jpg"alt=""

/div

javascript

//图片放大镜

//@paramsClass目标classstring

//@paramsScale放大倍数number

functionScaleImg(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();

}

ScaleItotype={

//鼠标移入

Mouseover:function(e){

vare=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){

vare=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){

vare=e||window.event;

//图片鼠标位置

varImgXY={"x":this.Left+this.BoxX,"y":this.Top+this.BoxY};

//获取偏移量

varleft=(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){

varthat=this;

this.Box.onmouseover=function(e){

that.Mouseover(e);

}

this.Box.onmouseout=function(e){

that.Mouseout(e);

}

this.Box.onmousemove=f