JQ鼠标移入显示大图

说明：这次分享的显示大图功能，强大之处是经过小鱼改造可适用图片在各种位置，自动根据位置在左上，右上，左下，右下显示，默认为右下显示。
第二点的优势是简易的配置图片大小，图片相对鼠标的位置。
第三点是此方法经实践能够适用各种业务系统，无需修改源代码即可使用。

对应的HTML样式

<a target="_blank" href="url" href1="url.jpg" class="tooltip1" title=""><img src="url.jpg" title="sadga" width="50" height="50"></a>

//绑定显示大图
function bindBigImage() {
    $(".tooltip1").unbind();
    var x = 10;
    var y = 20;
    var size = 400;
    var minHeight = 0;      //动态变量，默认0
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    $(".tooltip1").mouseover(function (e) {
        this.myTitle = this.title;
        this.title = "";
        var tooltip = "<div id='tooltip'><img src='" + $(this).attr('href') + "' alt='大图' width='" + size + "' style='max-width:400px;max-height:600px;' /></div>";
        $("body").append(tooltip);
        var aimHeiht = $("#tooltip").height();
        var imgWidth = windowWidth - e.pageX;
        var imgHeight = windowHeight - e.pageY;
        if (aimHeiht < size)
            minHeight = size;
        else
            minHeight = aimHeiht;
        //判断图片显示左边或右边
        if (imgWidth < size) {
            if (imgHeight < (aimHeiht + y)) {
                $("#tooltip")
                .css({
                    "top": (e.pageY - y - minHeight + imgHeight) + "px",
                    "right": (e.pageX - x - size) + "px",
                    "position": "absolute",
                    "z-index": 999
                }).show("fast");
            }
            else {
                $("#tooltip")
                .css({
                    "top": (e.pageY + y) + "px",
                    "right": (e.pageX - x - size) + "px",
                    "position": "absolute",
                    "z-index": 999
                }).show("fast");
            }
        }
        else {
            if (imgHeight < (aimHeiht + y)) {
                $("#tooltip")
                .css({
                    "top": (e.pageY - y - minHeight + imgHeight) + "px",
                    "left": (e.pageX + x) + "px",
                    "position": "absolute",
                    "z-index": 999
                }).show("fast");
            }
            else {
                $("#tooltip")
                .css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px",
                    "position": "absolute",
                    "z-index": 999
                }).show("fast");
            }
        }
    }).mouseout(function (e) {
        this.title = this.myTitle;
        $("#tooltip").remove();
    }).mousemove(function (e) {
        var aimHeiht = $("#tooltip").height();
        var imgWidth = windowWidth - e.pageX;
        var imgHeight = windowHeight - e.pageY;
        if (aimHeiht < size)
            minHeight = size;
        else
            minHeight = aimHeiht;
        if (imgWidth < size) {
            if (imgHeight < (aimHeiht + y)) {
                $("#tooltip").css({
                    "top": (e.pageY - y - minHeight + imgHeight) + "px",
                    "right": (e.pageX - x - size) + "px"
                });
            }
            else {
                $("#tooltip").css({
                    "top": (e.pageY + y) + "px",
                    "right": (e.pageX - x - size) + "px"
                });
            }
        }
        else {
            if (imgHeight < (aimHeiht + y)) {
                $("#tooltip").css({
                    "top": (e.pageY - y - minHeight + imgHeight) + "px",
                    "left": (e.pageX + x) + "px"
                });
            }
            else {
                $("#tooltip").css({
                    "top": (e.pageY + y) + "px",
                    "left": (e.pageX + x) + "px"
                });
            }
        }
    });
}