放大鏡效果實現

效果圖：

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