放大镜效果实现

效果图：

<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>