Jquery 鼠标划过图片，图片放大显示

 在图片标签中调用方法：onMouseOver="showImage(this)" onMouseOut="hideImage(this)"

在script标签中：

function showImage(a) {
        var max = 400;
        var img = $("< img width=\"300\" src='" + a.src + "' style='border:1px solid #ccc;'/>");
        var imgDiv = $("#sd").append(img);
        imgDiv.show();

        var width = img.attr("width");
        var height = img.attr("height");
        if (width >= height && width > max) {
            height = height * max / width;
            width = max;
        } else if (height >= width || height > max) {
            width = width * max / height;
            height = max;
        }
        var offset = $(a).offset();
        imgDiv.css("left", offset.left + $(a).outerWidth() + 3);
        var buttom = $(window).height() + $(document).scrollTop() - max
                - offset.top;
        if (buttom < 0) {
            imgDiv.css("top", offset.top + buttom - 3);
        } else {
            imgDiv.css("top", offset.top - 3);
        }
        //imgDiv.css("top", 0);
        img.width(width);
        img.height(height);
    }
    function hideImage(a) {
        $("#sd").empty().hide();
    }

将以下div粘到body中，效果完成：

<div id="sd" style="position: absolute; height: 300px; width: 400px;display: none;"></div>