如何用js写出放大镜效果？

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>放大镜 - http://www.baiduyo.com</title>
<style type="text/css">

#div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }

#div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript">
    function getClass(oParent,sClass){
	    var allTag = oParent.getElementsByTagName('*');
		var i;
		var classArr = [];
		for(i=0;i<allTag.length;i++){
		    if(allTag[i].className == sClass) {
			    classArr.push(allTag[i]);
			}
		}
		return classArr;
	}
window.onload = function(){
    var oDiv = document.getElementById('div1');
	var oMark = getClass(oDiv,'mark')[0];
	var oFloat = getClass(oDiv,'float_layer')[0];
	var oSmall = getClass(oDiv,'small_pic')[0];
	var oBig = getClass(oDiv,'big_pic')[0];
	var oImg = oBig.getElementsByTagName('img')[0]; 
	oMark.onmouseover = function(){
		oFloat.style.display = 'block';
		oBig.style.display = 'block';

		this.onmousemove = function(e){
			var evt = e || e.event;
			var left = evt.clientX - oSmall.offsetLeft - oDiv.offsetLeft - oFloat.offsetWidth / 2;
			var top = evt.clientY - oSmall.offsetTop -oDiv.offsetTop - oFloat.offsetHeight / 2;
			if (left<0) {
			    left = 0;
			} else if(left > (oSmall.offsetWidth - oFloat.offsetWidth)) {
			    left = oSmall.offsetWidth - oFloat.offsetWidth;
			}
			if (top <0) {
			    top = 0;
			} else if (top > (oSmall.offsetHeight - oFloat.offsetHeight)) {
			    top = oSmall.offsetHeight - oFloat.offsetHeight;
			}
		
			
			oFloat.style.left = left + 'px';
			oFloat.style.top = top + 'px';
			
			var percentX = left / (oMark.offsetWidth - oFloat.offsetWidth);
			var percentY = top / (oMark.offsetHeight - oFloat.offsetHeight);
			
			oImg.style.left = -percentX * (oImg.offsetWidth - oBig.offsetWidth) + 'px';
			oImg.style.top = -percentY * (oImg.offsetHeight - oBig.offsetHeight) + 'px';
			
			//alert(oImg.offsetWidth + '--'+oBig.offsetWidth);
			
			//document.title = percentX + '-' + percentY;
		}
	}
	oMark.onmouseout = function(){
	    oFloat.style.display = 'none';
		oBig.style.display = 'none';
	}
	
	
}



</script>
</head>

<body>

<div id="div1">

    <div class="small_pic">
		<span class="mark"></span>
        <span class="float_layer"></span>
        <img src="images/small.png" alt="放大镜图片一" longdesc="http://www.biaduyo.com" />
    </div>

    <div class="big_pic" style="display:none">
		<img src="images/big.png" alt="放大镜图片二" longdesc="http://www.baiduyo.com" />
	</div>

</div>

</body>
</html>