学步园

如下：

function SetImgShow(es) {
    //图片移动，把未显示的部份按鼠标动作显示出来，前提：img放在position:relative样式的容器中，img的position:absolute，es为容器jQuery集
    es.mousemove(function(e) {
        var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
        var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
        if (!e) var e = window.event;
        if (e.pageX || e.pageY) {
            xx = e.pageX;
            yy = e.pageY;
        }
        else if (e.clientX || e.clientY) {
            xx = xx + document.body.scrollLeft + document.documentElement.scrollLeft;
            yy = yy + document.body.scrollTop + document.documentElement.scrollTop;
        }
        var offset = $(this).offset();
        var wx = xx - offset.left;
        var wy = yy - offset.top;
        var ww = $(this).width();
        var hh = $(this).height();

        var img = $(this).find("img");
        var h = $(img).height();
        var w = $(img).width();
        if (h > hh) {
            var t = parseInt(0 - (h - hh) * wy / hh);
            $(img).css("top", t + "px");
        }
        if (w > ww) {
            var l = parseInt(0 - (w - ww) * wx / ww);
            $(img).css("left", l + "px");
        }
    });
    /*
    $(this).bind("mouseout", function() {
        var img = $(this).find("img");
        img.css("top", "0px");
        img.css("left", "0px");
    });
    */
}

显示图片时，可以调用：onload="ShowImg(this)"

function ShowImg(e) {
    var w = parseInt($(e).width());
    var h = parseInt($(e).height());
    var bw = 227;  //$("#" + id).width();
    var bh = 227; //$("#" + id).height();
    var b1 = w / h, b2 = bw / bh;
    if (b1 < b2) {
        $(e).css("width", bw + "px");
    }
    else {
        $(e).css("height", bh + "px");
    }
}

HTML：

<ul id="imgs">
 <li style="width:227px;height:227px;position:relative">
    <img src="1.jpg" style="position:absolute" onload="ShowImg(this)" /></li>
 <li style="width:227px;height:227px;position:relative">
    <img src="2.jpg" style="position:absolute" onload="ShowImg(this)" /></li>
</ul>
<script>
SetImgShow($("#imgs li"));
</script>