Jquery实现图片预览

css样式:

.img1 { width:100px; height:100px;}

img{border:none;}
#p1{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	}

javascript代码:

xOffset = 10;
yOffset = 30;
//当鼠标移动到a元素之上时触发事件
$("a.a1").hover(function(e){
		this.t = this.title;
		this.title = "";
		var c = (this.t != "")?"<br />" + this.t:"";
		$("body").append("<p id = 'p1'><img src='"+this.href+"' alt='image' />"+c+"</p>");
		$("#p1")
			.css("top",(e.pageY - xOffset)+"px")
			.css("left",(e.pageX - yOffset)+"px")
			.fadeIn("fast");
	},function(){
                //鼠标离开元素时触发事件
		this.title = this.t;
        $("#p1").remove();
	});
        //鼠标移动时的事件
	$("a.a1").mousemove(function(e){
		$("#p1")
			.css("top",(e.pageY - xOffset) + "px")
        	.css("left",(e.pageX + yOffset) + "px");
	});

html代码:

<a href="images/Hydrangeas.jpg" class="a1" title="八仙花">
    <img src="images/Hydrangeas.jpg" class="img1" title="八仙花"></a>
    <a href="images/Penguins.jpg" class="a1" title="企鹅">
    <img src="images/Penguins.jpg" class="img1" title="企鹅"></a>