锋利的JQuery实例-图片提示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>图片提示</title> <style type="text/css"> body { margin: 0; padding: 40px; background: #fff; font: 80% Arial, Helvetica, sans-serif; color: #555; line-height: 180%; } img { border: none; } ul, li { margin: 0; padding: 0; } li { list-style: none; float: left; display: inline; margin-right: 10px; border: 1px solid #AAAAAA; } /* tooltip */ #tooltip { position: absolute; border: 1px solid #ccc; background: #333; padding: 2px; display: none; color: #fff; } </style> <!-- 引入jQuery --> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function () { var x = 10; var y = 20; $(".tooltip").mouseover(function (e) { this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'><img src=" + this.href + " alt='产品展示图' /><br />" + this.myTitle + "</div>"; $("body").append(tooltip); $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); }).mouseout(function () { this.title = this.myTitle; $("#tooltip").remove(); }).mousemove(function (e) { $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); }) </script></head><body> <form id="form1" runat="server"> <h3> 有效果：</h3> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"> <img src="images/apple_1.jpg"/></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"> <img src="images/apple_2.jpg"/></a></li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"> <img src="images/apple_3.jpg"/></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"> <img src="images/apple_4.jpg" /></a></li> </ul> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <h3> 无效果：</h3> <ul> <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"> <img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"> <img src="images/apple_2.jpg" alt="苹果 iPod nano" /></a></li> <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"> <img src="images/apple_3.jpg" alt="苹果 iPhone" /></a></li> <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"> <img src="images/apple_4.jpg" alt="苹果 Mac" /></a></li> </ul> </form></body></html>
页:
[1]