复制代码 代码如下:<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>

　　推荐阅读

　　js parentElement和offsetParent之间的区别

首先是 parentElement 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过 parentElement 属性来获取元素A。 这里主要说的是 offsetParent 属性，这个属性在 M>>>详细阅读

本文标题：锋利的jQuery 第三章章节总结的例子

地址：http://www.17bianji.com/kaifa2/JS/26791.html

 1/2    1