锋利的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>