效果：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
本文：http://www.cnblogs.com/jihua/p/bigimg.html
原文：http://keleyi.com/a/bjac/h12vjfyv.htm