鼠标移动 在左边放大图片

//图片缩放
    $(document).ready(function () {
        var x = 30;
        var y = 20;
        var imgHeight = 0;//图片高度
        $(document).on('mouseover', 'img.tooltip', function (e) {
            var tooltip = "<div id='tooltip'><img src='" + this.src + "' style='max-300px; max-height:300px;'/></div>"; //创建 div 元素
            $("body").append(tooltip);
            imgWidth = $("#tooltip").width();
            imgHeight = $("#tooltip").height();
            var scrLeft = e.originalEvent.x || e.originalEvent.layerX || 0;
            //把它追加到文档中
            $("#tooltip").css({
                "top": (e.pageY - imgHeight - y) < 0 ? 10 : (e.pageY - imgHeight - y) + "px",
                "left": scrLeft + x + "px"
            }).show("fast");//设置x坐标和y坐标，并且显示
        }).on('mouseout', function () {
            $("#tooltip").remove();     //移除 
        }).on('mousemove', function (e) {
            var scrLeft = e.originalEvent.x || e.originalEvent.layerX || 0;
            $("#tooltip").css({
                "top": (e.pageY - imgHeight - y) < 0 ? 10 : (e.pageY - imgHeight - y) + "px",
                "left": scrLeft + x + "px"
            });
        });
    });

<style type="text/css">
    /* 图片放大tooltip */
    #tooltip {
        position: absolute;
        border: 1px solid #eeeeee;
        background: #eeeeee;
        padding: 1px 1px 1px 1px;
        display: none;
    }
</style>

<img src="src" class="tooltip" width="40" height="40"/>