popup框显示

分享jquery的一个小插件jquery-picture-view.js

图片放大预览还不是很完善，存在一排图片，最后的图片如果过大，会溢出浏览器的问题，文字放大预览效果还是不错的！

代码如下：

/**图片预览效果**/
this.imagePreview = function(){	
	/* CONFIG */
	xOffset = 10;
	yOffset = 30;
	// these 2 variable determine popup's distance from the cursor
	// you might want to adjust to get the right result
	/* END CONFIG */
	
	$("a.preview").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		//换成大图显示,根据自身业务需求自定义
		var myhref = this.href.replace("_mid","_big");
		
		//新建一个显示大图层,自定义图片样式添加了100%，试它完全在p标签里面
		$("body").append("<p id='preview'><img src='"+ myhref +"' alt='Image preview'/>"+ c +"</p>");								 
		/**大图层样式
		  *目前存在的问题就是：
		  *1、图片没有设定最大max-width，所以有的图片会很大
		  *2、如果是一排图片显示，在最右边的图片，可能溢出屏幕的宽度，这时定位就不能单纯的指定光标的位置偏移一点， 
		  *	 而且要将屏幕的宽度-max-width，从而继续定位大图层的top,left属性
		**/
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")    //光标的位置偏移一点offset
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
    //销毁
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};

/**对话框预览效果**/
this.textPreview = function(){
	/* BEGIN CONFIG */
	// these 2 variable determine popup's distance from the cursor
	// you might want to adjust to get the right result
	xOffset = 10;
	yOffset = 30;
	/* END CONFIG */
	
	$("a.textPreview").hover(function(e){
		this.t = $(this).attr("content");
		this.title = "";	
//		var c = (this.t != "") ? " this.t : "";
		
		//新建一个绝对定位的显示块
		$("body").append("<p id='textPreview'> " + this.t +"</p>");								 
		$("#textPreview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.css("position","absolute")
			.css("color","red")
			.css("background"," rgb(253, 242, 242)")
			.css("font-size"," 18px")
			.css("padding"," 10px 15px")
			.css("border-radius"," 10px")
			.css("word-wrap"," break-word")
			.css("word-break", "break-all")
			.css("max-width", "300px")
			.fadeIn("fast");						
	},
	function(){
		//this.title = this.t;	 //这样title和textPreview的效果会重叠,反而看不清
		$("#textPreview").remove();
    });	
	
	$("a.textPreview").mousemove(function(e){
		$("#textPreview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};

HTML understore.js 模板的写法：

<div style="float: left;line-height: 15px;margin-left: 15px; ">
	<a href="javascript:void(0);" class="textPreview"
			content="<%=shareObj.content%>">查看完整内容 </a>
</div>

<a href="<%= photoObj.photoName %>" class="preview" onclick="selectPhotoItem(<%= photoObj.id %>);return false;">
	<img class="photoItem" isselected="0" photoId="<%= photoObj.id %>" id="photoVerify<%= photoObj.id %>"
		 photoPath="<%=photoObj.photoName%>" userId="<%=photoObj.userId%>"
		src="<%= photoObj.photoName %>">
 </a>

模板填充数据之后代用js代码：

//  预览大图
$(document).ready(function(){
	imagePreview();
	textPreview();
});