效果：http://keleyi.com/keleyi/phtml/image/8.htm
以下是完整代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5 <title>JQ实现鼠标经过显示大图效果-柯乐义</title> 6 <meta name="description" content="JQ实现鼠标经过显示大图效果 柯乐义" /><meta name="keywords" content="JQ实现鼠标经过显示大图效果 keleyi.com" /> 7 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 8 <script type="text/javascript"> 9 $(function () { 10 var x = 10; 11 var y = 20; 12 $("a.tooltip").mouseover(function (e) { 13 this.myTitle = this.title; 14 this.title = ""; 15 var imgTitle = this.myTitle ? "<br />" + this.myTitle + " 产品预览图" : ""; 16 var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='柯乐义产品' width='765' height='574' />" + imgTitle + "</div>"; 17 $("body").append(tooltip); 18 $("#tooltip") 19 .css({ 20 "top": (e.pageY + y) + "px", 21 "left": (e.pageX + x) + "px" 22 }).show("fast"); 23 }).mouseout(function (e) { 24 this.title = this.myTitle; 25 $("#tooltip").remove(); 26 }).mousemove(function (e) { 27 $("#tooltip").css({ 28 "top": (e.pageY + y) + "px", 29 "left": (e.pageX + x) + "px" 30 }); 31 }); 32 }) 33 </script> 34 <style> 35 ul{margin: 30px auto; width:1440px;} 36 ul li{float: left; padding-right: 20px; list-style: none;} 37 ul li img{width: 77px; height: 57px; padding: 6px; border: 1px solid #ccc; background-color:#eee; -webkit-border-radius: 8px;} 38 #tooltip{ 39 position: absolute; 40 background-color: #eee; 41 border: 1px solid #999; 42 width: 765px; 43 height: 590px; 44 -webkit-border-radius: 8px; 45 font-family: "微软雅黑"; 46 padding: 20px; 47 } 48 </style> 49 </head> 50 <body> 51 <div><a href="http://keleyi.com/a/bjac/h12vjfyv.htm" target="_blank">原文</a></div> 52 <div><ul> 53 <li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" title="柯乐义1" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" alt="柯乐义1" /></a></li> 54 <li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" title="柯乐义2" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" alt="柯乐义2" /></a></li> 55 <li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" title="柯乐义3" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" alt="柯乐义3" /></a></li> 56 <li><a href="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" title="柯乐义4" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" alt="柯乐义4" /></a></li> 57 </ul></div><div>柯乐义提醒您：把光标移动到图片上查看效果。</div> 58 </body> 59 </html>
代码中用到捕捉鼠标位置的功能，请参考http://keleyi.com/a/bjac/8p1g5yeq.htm