Jquery兑现图片预览

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;}

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");});

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