php技术博客
让天下没有搞不定的bug~

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

以下为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库!
技术分享,技术交流,小涛与您共同成长
赞(0)
未经允许不得转载:PHP技术博客 » 超级简单又实用的jquery图片预览功能

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #2

    js很头疼

    皇家元林9年前 (2012-12-06)回复
  2. #1

    网站不错, 收藏了,

    张仪9年前 (2012-11-29)回复