jquery 鼠标移到图片弹出浮动层显示大图片

 在做项目的时候大家会遇到这种情况:页面中需要显示图片，但是原图片有比较大为了页面的排版只能对图片进行压缩，而在页面中又需要能够看清图片内容。这种情况就用到了下面要讲的“jquery 鼠标移到图片弹出浮动层显示大图片”。

     比较简单就直接贴代码了：bigImgShow.js(名字自己随意命名)

     

$(document).ready(function(){
	var x = 10;
	var y = 20;
	var screenWidth = $(document.body).width();//浏览器时下窗口文档body的宽度
	var imgWigth=0;//图片宽度
	var imgHeight=0;//图片高度
	$("a.tooltip").mouseover(function(e){
		//this.myTitle = this.title;
		//this.title = "";	
		//var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<div id='tooltip'><img src='"+ this.href +"' style='max-width:500px; max-height:500px;'/><\/div>"; //创建 div 元素
		$("body").append(tooltip);
		 imgWidth = $("#tooltip").width();
		 imgHeight = $("#tooltip").height();
		//把它追加到文档中						 
		$("#tooltip")
			.css({
				"top": (e.pageY-imgHeight-y) + "px",
				"left": ((screenWidth-imgWidth)/2) + "px"
			}).show("fast");	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
		//this.title = this.myTitle;	
		$("#tooltip").remove();	 //移除 
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY-imgHeight-y) + "px",
				"left": ((screenWidth-imgWidth)/2) + "px"
			});
	});
})

另外,需要如下样式#tooltip{......}

 /* 图片放大tooltip */
#tooltip{
	position:absolute;
	border:1px solid #eeeeee;
	background:#eeeeee;
	padding:1px 1px 1px 1px;
	display:none;
}

在页面中引入上面js就可以了，另外别忘了要引入jquery库

<a href="图片路径" class="tooltip" target="_blank"><img src="图片路径（同）"  style="max-width:37px; max-height:33px;"/></a><a href="图片路径（同）" target="_blank">查看原图</a>

效果图如下