1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片提示</title> 6 <!-- 引入jQuery --> 7 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 8 <style type="text/css"> 9 body{margin:0;padding:40px;background:#fff;font:80%Arial,Helvetica,sans-serif;color:#555;line-height:180%;} 10 img{border:none;} 11 ul,li{margin:0;padding:0;} 12 li{list-style:none;float:left;display:inline;margin-right:10px;border:1px solid#AAAAAA;}#tooltip{position:absolute;border:1px solid#ccc;background:#333;padding:2px;display:none;color:#fff;} 13 </style> 14 <script type="text/javascript"> 15 //<![CDATA[ 16 $(function(){ 17 var x = 10; 18 var y = 20; 19 $("a.tooltip").mouseover(function(e){ 20 this.myTitle = this.title; 21 this.title = ""; 22 var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; 23 var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建 div 元素 24 $("body").append(tooltip); //把它追加到文档中 25 $("#tooltip") 26 .css({ 27 "top": (e.pageY+y) + "px", 28 "left": (e.pageX+x) + "px" 29 }).show("fast"); //设置x坐标和y坐标，并且显示 30 }).mouseout(function(){ 31 this.title = this.myTitle; 32 $("#tooltip").remove(); //移除 33 }).mousemove(function(e){ 34 $("#tooltip") 35 .css({ 36 "top": (e.pageY+y) + "px", 37 "left": (e.pageX+x) + "px" 38 }); 39 }); 40 }) 41 //]]> 42 </script> 43 44 </head> 45 <body> 46 <h3>有效果：</h3> 47 <ul> 48 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 49 <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 50 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 51 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 52 </ul> 53 54 55 <br/><br/><br/><br/> 56 <br/><br/><br/><br/> 57 58 59 <h3>无效果：</h3> 60 <ul> 61 <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 62 <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 63 <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 64 <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 65 </ul> 66 </body> 67 </html>