jquery实现的放大镜

这是一个很简单的放大镜的实现：

html中加入：

<div id="myJqzoom" bigImage="big.jpg" style="border:solid 1px black;clear:both">
	<img src="small.jpg" />
</div>

js代码：

$(function(){
	myJqzoom($("#myJqzoom"));
});

//放大镜
function myJqzoom(myJqzoomDiv){
	//作为参数传进来
//	var myJqzoomDiv = $("#myJqzoom");

	myJqzoomDiv.css("position","relative");
	myJqzoomDiv.css("float","left");

	var offSetLeft = myJqzoomDiv.offset().left; //控件的位置
	var offSetTop = myJqzoomDiv.offset().top;

	var myJqzoomDivWidth=myJqzoomDiv.outerWidth(true);//控件的宽高
	var myJqzoomDivHeight=myJqzoomDiv.outerHeight(true);

	var pageLeft;//鼠标的位置
	var pageTop;

//  添加覆盖区域
	var pupHtml='<div class="pupzoom undis" style="clear:both"> </div>';
	var pupzoom = $(pupHtml).appendTo(myJqzoomDiv);

	var pupzoomWdith=pupzoom.outerWidth(true);//覆盖区域的宽和高
	var pupzoomHeight=pupzoom.outerHeight(true);

	var pupLeft=0;//覆盖区域的位置
	var pupTop=0;


	//添加大图区域
	var bigImg=myJqzoomDiv.attr("bigImage");
	var top1Html='<div class="pa" style="left:360px;top:0px"></div>';
	var top1=$(top1Html).appendTo(myJqzoomDiv);
	var top2Html='<div class="pr w400" style="border:solid 1px #999"></div>';
	var top2=$(top2Html).appendTo(top1);
	var top3Html='<div id="big" class="h400 pr" style="width:100%;overflow:hidden"></div>';
	var big=$(top3Html).appendTo(top2);
	var imgHtml='<img src="'+bigImg+'" style class="pa" />'
	var img=$(imgHtml).appendTo(big);
	

	myJqzoomDiv.mouseover(function(){
		pupzoom.removeClass("undis");
	}).mousemove(function(e){
		pageLeft = e.pageX;
		pageTop = e.pageY;
		
		//阴影框的显示
		pupLeft=pageLeft-(pupzoom.outerWidth(true)/2)-offSetLeft;
		pupTop=pageTop-(pupzoom.outerHeight(true)/2)-offSetTop;

		if(pupLeft<0){
			pupLeft=0;
		}
/*		if(pupTop<=offSetTop){
			pupTop=offSetTop;
		}*/
		if(pupLeft+pupzoom.outerWidth(true)>myJqzoomDiv.outerWidth(true)){
			pupLeft=myJqzoomDiv.outerWidth(true)-pupzoom.outerWidth(true);
		}
		/*if(pupTop+pupzoom.outerHeight(true)>=offSetTop+myJqzoomDiv.outerHeight(true)){
			pupTop=offSetTop+myJqzoomDiv.outerHeight(true)-pupzoom.outerHeight(true);
		}*/
		if(pupTop<0){
			pupTop=0;
		}
		if(pupTop+pupzoom.outerHeight(true)>(myJqzoomDiv.outerHeight(true))){
			pupTop=myJqzoomDiv.outerHeight(true)-pupzoom.outerHeight(true);
		}
		pupzoom.css("left",pupLeft+"px");
		pupzoom.css("top",pupTop+"px");
		
		$("#big img").css("left",((0-pupLeft)*($("#big").outerWidth(true)/pupzoom.outerWidth(true)))+"px");
		$("#big img").css("top",((0-pupTop)*($("#big").outerHeight(true)/pupzoom.outerHeight(true)))+"px");

	}).mouseout(function(){
		pupzoom.addClass("undis");
	});
}

css代码：

.pupzoom{
	width:175px;
	height:175px;
	border:1px solid orange;
	position:absolute;
}
.pr{
	position:relative;
}
.pa{
	position:absolute;
}
.w350{
	width:350px;
}
.h350{
	height:350px;
}
.w175{
	width:175px;
}
.h175{
	height:175px;
}
.w400{
	width:400px;
}
.h400{
	height:400px;
}
.undis{
	display:none;
}

里面用到的两张图，从京东上弄下来的，一张是350*350的，一张是800*800的。