最終效果

滑鼠移動至圖片上，彈出預覽視窗，滑鼠移出圖片，關閉彈出視窗

圖片預覽的dialog 

<!-- 用於圖片預覽的dialog -->
<div id="dialog" class="easyui-dialog" title="圖片預覽" data-options="resizable:true,modal:false,closed:true,closeOnEscape:false" >
   <img id="img_id" alt="">
</div>

 資料表中的回顯資料

	formatter : function(value, rowData,rowIndex) {
			if(value == ''){
				return '';
			}else{
				return '<img  style="display:block;margin:0 auto" onmouseover="bigImg(this)" onmouseout="closeImgWin()" src="<%=contextPath%>/admin/companyController/getImg_noSecurity?path='+value+'" height="50" width="50" />';
			}
			}
 

核心放大圖片js

	function bigImg(imgObj){
		/**
		 * dialog預覽圖片
		* @param imgObj img的jquery物件
		 **/
			// 若imgObj為空或imgObj的[src]為【Þ】時，圖片無法開啟
		    if ((imgObj == undefined || imgObj == null || imgObj.length == 0)
		    		|| ($(imgObj).attr("src") == "" || /Þ$/i.test($(imgObj).attr("src")))) {
		    	$.messager.alert('提示', "該圖片無法開啟！");
		    	return;
		    }
		    var img = new Image();   
			img.src = $(imgObj).attr("src");
			
			var imgWidth = "";
			var imgHeight = "";
			var imgProportion="";
				// 當<img>的class中配置了"img-width-**px"或"img-height-**px"或"img-proportion-**%"時（僅支援整數），使用對應的圖片大小
			var imgClassNames = $(imgObj).prop("class");
			if (imgClassNames != undefined && imgClassNames != "") {
				var imgClassNameArray = imgClassNames.split(" ");
				var imgClassName;
				for (var index in imgClassNameArray) {
					imgClassName = imgClassNameArray[index];
					// 圖片寬度
					if (/^(img-width-\d+px)/i.test(imgClassName)) {
						imgWidth = imgClassName.substring(10,imgClassName.length-2);
						
					// 圖片高度
					} else if (/^(img-height-\d+px)/i.test(imgClassName)) {
						imgHeight = imgClassName.substring(11,imgClassName.length-2);
						
					// 圖片顯示比例
					} else if (/^(img-proportion-\d+%)/i.test(imgClassName)) {
						imgProportion = imgClassName.substring(15,imgClassName.length);
					}
				}
			}
			// 顯示寬度
			if (imgWidth != null && imgWidth != "") {
				img.width = imgWidth;
			}
			// 顯示高度
			if (imgHeight != null && imgHeight != "") {
				img.height = imgHeight;
			}
			// 顯示比例設定
			if (imgProportion != null && imgProportion != "") {
				img.width  = img.width * parseFloat(imgProportion)/100;
				img.height  = img.height * parseFloat(imgProportion)/100;
			}
			// 保持圖片縱橫比的情況下，取得能夠在$(window)中放得下的大小
			var heightWidthPropor = img.height/img.width;
			var width = $(window).width()*0.8 >= img.width ? img.width:$(window).width()*0.8;
			var height;
			if ($(window).height()*0.8 < width*heightWidthPropor) {
				height = $(window).height()*0.8;
				width = height/heightWidthPropor;
			} else {
				height = width*heightWidthPropor;
			}
			
			// 防止因使用者拖動邊框而導致dialog寬高固定不變
			$("#dialog").parent().css("width","auto");
			$("#dialog").parent().css("height","auto");
			
			$("#img_id").css("height",height + "px");
			$("#img_id").css("max-height",height + "px");
			if (imgWidth != null && imgWidth != "") {
				$("#img_id").css("width",width + "px");
				$("#img_id").css("max-width",width + "px");
			}
			
			$("#dialog").css("width",width + "px");
			$("#dialog").css("height",height + 5 + "px");
			
			$("#img_id").css("overflow","hidden");
			$("#img_id").attr('src',img.src); 
			$("#dialog").window('center');
			// 解決關閉按鈕位置問題
			$("div.panel-header.panel-header-noborder.window-header").css("width","auto");
		 	$("#dialog").dialog("open");
		

	}
	
	function closeImgWin(){
		$("#dialog").dialog("close");
	}