放大镜效果

今天分享一下放大镜的效果，希望对你有所帮助，若有不足请指正，望大家共同进步。

CSS样式

一些基本的css样式，你也可以根据你的爱好进行更改

*{
	margin: 0px;
	padding:0px;
}
.fangdajing{
	width: 400px;
	height: 400px;
	position: relative;
	margin:100px; 
}
.small{
	width: 400px;
	height: 400px;
	overflow: hidden;
	border: 1px solid;
}
img{
	border: none;
	border: 0px;
}
.small img{
	width: 400px;
	height: 400px;
	float: left;
}
.big{
	width: 400px;
	height: 400px;
	border: 1px solid;
	position: absolute;
	left: 412px;
	top: 0px;
	display: none;
	overflow: hidden;
}
.big img{
	position: absolute;
}
.mask{
	width: 150px;
	height: 150px;
	background: rgba(0,0,255,.3);
	position: absolute;
	left: 0px;
	top: 0px;
	cursor: move;
	display: none;
}

基本结构

一个大容器里面包括两个小容器，一个放原图和蒙版，另一个显示放大区域

<div class="fangdajing">
	<div class="small">
		<img src="tu.jpg" alt="小图片">
		<div class="mask"></div>
	</div>
	<div class="big">
		<img src="tu.jpg" alt="大图片">
	</div>
</div>

JS部分

window.onload=function(){
	var small=document.querySelector('.small')//定义变量为小图所在div
	var big=document.querySelector('.big')//定义变量为大图所在div
	var mask=document.querySelector('.mask')//定义蒙版
	var glass=document.querySelector('.fangdajing')//定义放大镜容器
	var img=document.querySelector('.big img')//大图
	//鼠标移入事件 移入时大图和蒙版显示出来
	small.onmouseover=function(){
		mask.style.display='block';
		big.style.display='block';
	}
	//鼠标移出事件 移出时大图和蒙版消失
	small.onmouseout=function(){
		mask.style.display='none';
		big.style.display='none';
	}
	//鼠标移动事件
	small.onmousemove=function(event){
		var oEvent=event||window.event;//兼容各个浏览器
		var x=oEvent.clientX;//鼠标距离窗口左边的距离
		var y=oEvent.clientY;//鼠标距离窗口顶部的距离
		//如果页面有上下和左右的滚动的效果，x y还要考虑这种情况
		x=x-glass.offsetLeft-mask.offsetWidth/2;
		//此x为蒙版left的大小  若外边仍有容器包裹还需减掉xxx.offsetLeft
		y=y-glass.offsetTop-mask.offsetHeight/2;
		//此y为蒙版top的大小   若外边仍有容器包裹还需减掉xxx.offsetTop
		if (x<=0) {
			x=0;
		}else if (x>=glass.offsetWidth-mask.offsetWidth) {
			x=glass.offsetWidth-mask.offsetWidth;
		}
		if (y<=0) {
			y=0;
		}else if (y>=glass.offsetWidth-mask.offsetHeight) {
		y=glass.offsetWidth-mask.offsetHeight;
		}
		mask.style.left=x+'px';
		mask.style.top=y+'px';
		// 竖向放大倍数
		var l=small.offsetWidth/mask.offsetWidth;
		// 水平方向放大倍数
		var s=small.offsetHeight/mask.offsetHeight;
		img.style.width=l*small.offsetWidth+"px";
		img.style.height=s*small.offsetHeight+"px";
		img.style.left=-l*x+'px';
		img.style.top=-s*y+'px';				
	}
}

效果图

选择的图片分辨率不高，看着有点模糊