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