EasyUI之移动DataGrid数据中图片实现放大功能

最终效果

鼠标移动至图片上，弹出预览窗口，鼠标移出图片，关闭弹出窗口

图片预览的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");
	}