使用原生js编写一个鼠标移入图片放大效果

目标

给图片添加鼠标移动放大方法效果，移到哪里放大哪里

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

移入前

移入后

html

	
	<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');		

完了