转载4

超级简单又实用的jquery图片预览功能

2012年10月14日 ⁄ jQuery ⁄ 评论数 2

以下为javascript代码：

this.imagePreview = function() {
	xOffset = 10;
	yOffset = 30;
	$("a.preview").hover(
		function(e) {
			this.t = this.title;
			this.title = "";
			var c = (this.t != "") ? "<br/>" + this.t : "";
			$("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
			$("#preview").css("top", (e.pageY - xOffset) + "px").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");
	});
};
//调用
$(document).ready(function() {
	imagePreview();
});

以下为css代码：

#preview{
	position:absolute;
	border:1px solid #ccc;
	background:green;
	padding:5px;
	display:none;
	color:#fff;
}

以下为html代码：

<a href="http://www.google.cn/landing/cnexp/google-search.png">技术分享，技术交流，小涛与您共同成长</a>

友情提示：写js代码的时候。别忘了引用jq库！