使用js实现简单放大镜的效果

<div id="small"> ???<div id="pic1"> ???????<img src="62-130501163925.jpg" alt=""> ???</div> ???<div id="mask"></div></div><div id="big"> ???<div id="pic2"> ???????<img src="62-130501163925.jpg" alt=""> ???</div></div>

#small{ ???width: 500px; ???height: 312px; ???position: absolute; ???left: 20px; ???top: 20px;}#pic1{ ???position: absolute; ???left: 0px; ???top: 0px;}#pic1 img{ ???width: 100%; ???height: 100%;}#big{ ???width: 200px; ???height: 200px; ???position: absolute; ???right: 50px; ???top: 50px; ???border: 1px solid blue; ???overflow: hidden;}#pic2{ ???width: 1000px; ???height: 625px; ???position: absolute; ???left: 0; ???top: 0;}#pic2 img{ ???width: 100%; ???height: 100%;}#mask{ ???width: 100px; ???height: 100px; ???background: black; ???opacity: 0.3;/*让遮罩层看起来透明*/ ???filter: alpha(opacity = 30);/*兼容不同的浏览器*/ ???position: absolute; ???display: none;}

window.onload = function(){//文档内容加载完之后再执行 ???//当鼠标移入小图片，显示遮罩层和放大的区域 ???$(‘small‘).onmouseenter = function(){ ???????$(‘mask‘).style.display = ‘block‘; ???????$(‘big‘).style.display=‘block‘; ???} ???????//鼠标移出时，隐藏遮罩层和放大的区域 ???$(‘small‘).onmouseleave = function(){ ???????$(‘mask‘).style.display=‘none‘; ???????$(‘big‘).style.display="none"; ???} ???//鼠标移动 ???$(‘small‘).onmousemove = function(ev){ ???????var e = ev || window.event; ???????//计算鼠标的位置，并让鼠标显示在遮罩层的中间 ???????var l = e.clientX - $(‘small‘).offsetLeft - 50; ???????var t = e.clientY - $(‘small‘).offsetTop -50; ???????//别让遮罩层移出图片 ???????if(l <= 0){ ???????????l = 0; ???????} ???????if(l >= 500 - 100){ ???????????l = 400; ???????} ???????if(t <= 0){ ???????????t = 0; ???????} ???????if(t >= 312 - 100){ ???????????t = 212; ???????} ???????//遮罩层的移动 ???????$(‘mask‘).style.left = l + ‘px‘; ???????$(‘mask‘).style.top = t + ‘px‘; ???????//通过遮罩层移动，来计算出放大后图片的显示区域 ???????$("pic2").style.left = -$("mask").offsetLeft * 2 + ‘px‘; ???????$("pic2").style.top = -$("mask").offsetTop * 2 + ‘px‘; ???}}//为了更容容易的获取idfunction $(id){ ???return document.getElementById(id);}