源代码

<link rel="stylesheet" href="reset.css">
	
<style type="text/css">
	.main{
		width: 300px;
		height: 300px;
		position: relative;
		cursor: pointer;
		border :  1px solid #d1d1d1;
	}
	.main .wrap, .main .zoom{
		width: 100%;
		height: 100%;
	}
	.main .hover{
		width: 50%;
		height: 50%;
		background: #f55;
		opacity: 0.7;
		filter: alpha(opacity=70);
		left: 0;
		
	}
	.main .zoom{
		border : 1px solid #d1d1d1;
		left : 100%;
		margin-left: 50px;
		overflow: hidden;
	}
	.main .hover , .main .zoom{
		position: absolute;
		top: 0;
		display: none;
	} 

	.main .zoom .box{
		width: 150%;
		height: 150%;
		max-width: 150%;
		max-height: 150%;
		position: absolute;
	}

	.main .wrap:hover .hover,
	.main .wrap:hover + .zoom{
		display: block;
	}
</style>
	
<div class="main">
	<div class="wrap">
		<img src="/static/images/svon.jpg">
		<div class="hover"></div>
	</div>
	<div class="zoom">
		<div class="box">
			<img src="/static/images/svon.jpg">
		</div>
	</div>
</div>
<script src="jqueyr.min.js"></script>
//放大镜
	
var $wrap = $(".wrap",".main");
var $hover = $(".hover",$wrap);
var $zoom = $(".zoom .box",$wrap.parent());

var hoverWidth,
	hoverHeight,

	wrapWidth,
	wrapHeight,

	zoomWidth,
	zoomHeight;

$wrap.on("mousemove",function(e){
	//计算各容器的宽度与高度
	hoverWidth || (hoverWidth = $hover.width());
	hoverHeight || (hoverHeight = $hover.height());

	wrapWidth || (wrapWidth = $wrap.width());
	wrapHeight || (wrapHeight = $wrap.height());

	zoomWidth || (zoomWidth = $zoom.width());
	zoomHeight || (zoomHeight = $zoom.height());


	//计算图片的显示坐标
	var offset = $(this).offset();

	//获取鼠标的坐标
	var x = e.pageX - offset.left;
	var y = e.pageY - offset.top;
	
	//坐标差
	var left = x - parseInt(hoverWidth / 2, 10);
	var top = y - parseInt(hoverHeight / 2, 10);

	//计算遮罩层显示位置
	if(left < 0){
		left = 0;
	}
	if(top < 0){
		top = 0;
	}

	if(left + hoverWidth > wrapWidth){
		left = wrapWidth - hoverWidth;
	}
	if(top + hoverHeight > wrapHeight){
		top = wrapHeight - hoverHeight;
	}

	//移动遮罩层
	$hover.css({
		"left" : left + "px",
		"top" : top + "px"
	});	

	//计算大图的移动位置
	//移动比例 / 小图减去遮罩层的宽度  大图宽度见去它父元素的宽度
	var zoomX = (left / (wrapWidth - hoverWidth)) * (zoomWidth - wrapWidth);
	var zoomY = (top / (wrapHeight - hoverHeight)) * (zoomHeight - wrapHeight);

	//移动大图
	$zoom.css({
		"left" : (zoomX * -1) + "px",
		"top" : (zoomY * -1) + "px"
	});	

});