实现效果：当鼠标指向商品图片时，图片会自动放大。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文字放大</title> 6 7 <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9 body{ 10 margin:0; 11 padding:40px; 12 background:#fff; 13 font:80% Arial, Helvetica, sans-serif; 14 color:#555; 15 line-height:180%; 16 } 17 img{border:none;} 18 ul,li{ 19 margin:0; 20 padding:0; 21 } 22 li{ 23 list-style:none; 24 float:left; 25 display:inline; 26 margin-right:10px; 27 border:1px solid #AAAAAA; 28 } 29 30 /* tooltip */ 31 #tooltip{ 32 position:absolute; 33 border:1px solid #ccc; 34 background:#333; 35 padding:2px; 36 display:none; 37 color:#fff; 38 } 39 </style> 40 <script type="text/javascript"> 41 $(document).ready(function(){ 42 var x =10; 43 var y =20; 44 $("a.tooltip").mouseover(function(e){ 45 this.myTitle = this.title; 46 this.title=""; 47 var imgTitle=this.myTitle?"<br/>"+this.myTitle:""; 48 var tooltip = "<div id='tooltip'><img src=' "+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>"; 49 $("body").append(tooltip); 50 51 $("#tooltip").css({ 52 "top":(e.pageY+y)+"px", 53 "left":(e.pageX+x)+"px" 54 }) 55 .show("fast"); 56 }).mouseout(function(){ 57 this.title=this.myTitle; 58 $("#tooltip").remove(); 59 }).mousemove(function(e){ 60 $("#tooltip") 61 .css({ 62 "top": (e.pageY+y) + "px", 63 "left": (e.pageX+x) + "px" 64 }); 65 }); 66 }); 67 </script> 68 </head> 69 <body> 70 <h2>图片放大</h2> 71 <ul> 72 <li> 73 <p><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果iPod"><img src="images/apple_1.jpg" alt="苹果iPod"></a></p> 74 </li> 75 <li> 76 <p><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果iPod nano"><img src="images/apple_2.jpg" alt="苹果iPod nano"></a></p> 77 </li> 78 <li> 79 <p><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果iPhone"><img src="images/apple_3.jpg" alt="苹果iPhone"></a></p> 80 </li> 81 <li> 82 <p><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"></a></p> 83 </li> 84 </ul> 85 </body> 86 </html>