锋利的jQuery 第三章章节总结的例子

<style> 
li{ float:left; list-style:none; padding:3px;} 
img{ border:#CCC 1px solid;} 
#tooltip{ display:none; border:#CCC 1px solid; position:absolute;} 
.img1{ display:block;} 
.div1{ padding:0px; margin:0px; background:#111; color:FFF; font-family:微软雅黑;} 
</style> 
<ul> 
<li><a href="images/apple_1_bigger.jpg" class="tooltip"><img src="images/apple_1.jpg" /></a></li> 
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="第二个产品"><img src="images/apple_2.jpg" /></a></li> 
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="第三个产品"><img src="images/apple_3.jpg" /></a></li> 
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="第四个产品"><img src="images/apple_4.jpg" /></a></li> 
</ul> 
<script> 
var x = 10; 
var y = 10; 
$("a.tooltip").mouseover(function (e) { 
this.myTitle = this.title; 
this.title = ""; 
this.imgTitle = this.myTitle ? this.myTitle : "无title"; 
var tooltip = "<div id='tooltip'><img class='img1' src='" + this.href + "'/><div class='div1'>" + this.imgTitle + "</div></div>" 
$("body").append(tooltip); 
$("#tooltip").css({ 
"top": +(e.pageY + y) + "px", 
"left": +(e.pageX + x) + "px" 
}).show("fast"); 
}).mouseout(function () { 
$("#tooltip").remove(); 
this.title = this.myTitle; 
}) 
</script>