JQUERY实现鼠标悬停在图片上模拟放大镜效果

在很多网页上特别是电商网站上我们经常看到当我们的鼠标悬停在某张图片上时会有类似放大镜的效果，老规矩，放上效果图：

HTML代码：

<div id="normal">
    <img src="./1.jpeg" />
    <div id="show"></div>
</div>
<div id="big"><img src="./1.jpeg" /></div>

CSS代码：

*{ margin:0;padding:0; }
    #normal{ 
        position:relative;
        width:300px;
        height:200px;
        border:1px solid #000; 
    }
    #normal img{ 
        width:100%;
        height:100%; 
    }
    #show{ 
        width:50px;
        height:50px;
        background:#FF0;
        opacity:0.3;
        position:absolute;
        top:0;right:0;
        cursor:move;
        display:none; 
    }
    #big{ 
        width:300px;
        height:200px;
        overflow:hidden;
        position:relative;
        padding:10px;
        margin:10px; 
    }
    #big>img{
        position:absolute;
        top:0;left:0;
        width:1200px;
        height:800px; 
    }

JS代码：

$(function(){

    $('#normal').mouseover(function(){

        //鼠标移入"显示"方块
        $('#show').show();
        $(this).mousemove(function(ev){

            //鼠标移动方块随着移动
            $('#show').css({

                'left':ev.pageX-$('#show').width()/2,
                'top':ev.pageY-$('#show').height()/2

            })

            //防止方块移出图片内容    
            if($('#show').offset().top>$(this).height()-$('#show').height()){

                $('#show').css('top',$(this).height()-$('#show').height());

            }else if($('#show').offset().left>$(this).width()-$('#show').width()){

                $('#show').css('left',$(this).width()-$('#show').width());

            }else if($('#show').offset().bottom>$(this).height()-$('#show').height()){

                $('#show').css('bottom',$(this).height()-$('#show').height());

            }else if($('#show').offset().right>$(this).width()-$('#show').width()){

                $('#show').css('right',$(this).width()-$('#show').width());

            }

            //在大容器显示放大图片
            $('#big').find('img').css({

                'left':-1200*$('#show').offset().left/300,
                'top':-800*$('#show').offset().top/200

            });

        });


    });

    //鼠标移出图片让方块"消失"
    $('#normal').mouseout(function(){

        $('#show').hide(); 

    });

});