jQuery简单实现弹出层显示图片

不使用jQuery插件，用jQuery实现鼠标经过小图上方时，弹出层显示该图的大图，该功能可以用于其他应用，轻量级。
使用方法是添加应用js文件，然后在要显示大图的img标签中添加bigpic属性（bigpic可以自定义），另外还有一个关键就是css样式position：absolute和offset。
1. html内容

2. js.js文件内容如下：

$(function(){
	$("img").each(function(i){
		var p = $(this);
		var strbp = p.attr("bigpic");//获取bigpic属性
		if(strbp){
			var bp = $("


").appendTo("body").hide();
			var w = this.width;
			p.mouseover(function(e){
				var x=e.pageX ;
				var y=document.body.clientWidth
				bp.fadeIn();
				var offset = p.offset();
				if(x<(y/2))//判断鼠标位置在屏幕中线的左侧还是右侧
					bp.css("top", offset.top).css("left", offset.left+w+5);//左侧，则层在右方弹出
				else
					bp.css("top", offset.top).css("left", offset.left-415);//右侧，则层在左方弹出
				if(bp.html()=="")
					bp.html("");//此处页面显示有问题
			}).mouseout(function(){
				bp.fadeOut();
			});
		}
	});
});

3. 必须的css样式

.bigpic
{
	position:absolute;/*重要*/
	float:left;
	border:#ccc 1px solid;
	padding:2px;
	background-color:#252525;
}