放大镜效果实现

<style type="text/css">
#A1,#A2{
border:1px red dotted;
width:220px;
height:220px;
background:url(images/Dell.jpg) no-repeat;
position:relative;
}
#A2{
background-size:440px 440px;
}
#magnifier{
width:110px;
height:110px;
background:#FFFF33;
opacity:0.5;
position:absolute;
left:0px;top:0px;
cursor:move;display:none;
}
</style>

<div id="A1">
<div id="magnifier"></div>
</div>
<div id="A2"></div>

<script type="text/javascript">
document.getElementById('A1').onmouseover=function(){
document.getElementById('magnifier').style.display='block';
}
document.getElementById('A1').onmouseout=function(){
document.getElementById('magnifier').style.display='none';
}

Drag();
function Drag(){
var isdraging=false;
$("#magnifier").mousedown(function(e){
var atop=document.getElementById("magnifier").offsetTop;//鼠标摁下时黄色块与图片左上角y轴距离差
var mouseoffsetY=e.pageY-atop;//鼠标摁下时黄色块与鼠标箭头y轴距离差
var aleft=document.getElementById("magnifier").offsetLeft;//鼠标摁下时黄色块与图片左上角x轴距离差
var mouseoffsetX=e.pageX-aleft;//鼠标摁下时黄色块与鼠标箭头x轴方向距离差
isdraging=true;
document.onmousemove=function(e){
var e=e||window.event;
var moveX=e.pageX-mouseoffsetX;
var moveY=e.pageY-mouseoffsetY;
if(isdraging===true){
var moveX=Math.min(Math.max(0,moveX),110);//防止放大镜超出图片边框
var moveY=Math.min(Math.max(0,moveY),110);
document.getElementById("magnifier").style.left=moveX+"px";//更新放大镜位置
document.getElementById("magnifier").style.top=moveY+"px";;
document.getElementById('A2').style.backgroundPositionX = -2*moveX+"px";//更新大图位置
document.getElementById('A2').style.backgroundPositionY = -2*moveY+"px";
}
}
})
document.onmouseup=function(){
isdraging=false
}
}
</script>