转载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库！

转载4,布布扣,bubuko.com