1.HTML 内容

<div id="msg" style="float:left; top:0; left:0; width:80px; height:30px;"></div>
<div  style="margin:0 auto; width:1000px; border:1px solid red; text-align:center; position:relative;"> 
    <div id="outer"><img id="sImg" style=" border:1px solid black" src="s.jpg"  /></div>
    <div id="windowBox" style="border:1px solid blue; width:256px; height:256px; overflow:hidden; position:absolute; left:0px; top:0px;">
        <p id="bImg" style="position:absolute;"><img src="b.jpg"  /></p>
    </div>
</div>

2.Javascript 内容

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
    var $sImg = $("#sImg"),
        $outer = $("#outer"),
        $bImg = $("#bImg"),
        $wrapper = $("#windowBox"),
        $msg = $("#msg"),
        sImgPos = $sImg.offset();
    $wrapper.hide();
    
    $wrapper.bind("mousemove", function(e){
            var position = {left : e.clientX, top : e.clientY};
            $(this).css({
                left: function() {
                    return position.left - 256 + $(document).scrollLeft();
                }, 
                top: function() {
                    return position.top - 128 + $(document).scrollTop();
                }
            });
            $bImg.css({
                left: function() {
                    return (sImgPos.left -  position.left)*2;
                }, 
                top: function() {
                    return (sImgPos.top - position.top)*2;
                }
            });
            //$msg[0].innerHTML = $msg[0].innerHTML + "position.top:" + position.top + "  $sImg.height() : " + $sImg.height();
            if(position.left < sImgPos.left || position.top < sImgPos.top || position.left>sImgPos.left+$sImg.width() ||  position.top>$sImg.height()-$(document).scrollTop()){
                $wrapper.hide();
            }
        }
        )
    
    $sImg.bind({
        "mouseenter" : function(){
            $wrapper.show();
        },
        
        "mousemove" : function(e){
            var position = {left : e.clientX, top : e.clientY};
            $wrapper.css({
                left: function() {
                    return position.left - 256 + $(document).scrollLeft();
                }, 
                top: function() {
                    return position.top - 128 + $(document).scrollTop();
                }
            });
        }
    })
})();
</script>

3.使用的两张张图片

http://ued.taobao.com/blog/wp-content/uploads/aboutUs/b.jpg

http://ued.taobao.com/blog/wp-content/uploads/aboutUs/s.jpg