效果：http:///keleyi/phtml/image/8.htm
以下是完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JQ實現鼠標經過顯示大圖效果-</title>
<meta name="description" content="JQ實現鼠標經過顯示大圖效果 " /><meta name="keywords" content="JQ實現鼠標經過顯示大圖效果 " />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
var x = 10;
var y = 20;
$("a.tooltip-keleyi-com").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br />" + this.myTitle + " 產品預覽圖" : "";
var tooltip_keleyi_com = "<div id='tooltip-keleyi-com'><img src='" + this.href + "' alt='產品預覽圖' width='765' height='574' />" + imgTitle + "</div>";
$("body").append(tooltip_keleyi_com);
$("#tooltip-k"+"eleyi-com")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function (e) {
this.title = this.myTitle;
$("#tooltip-keleyi-com").remove();
}).mousemove(function (e) {
$("#tooltip-keley"+"i-com").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
</script>
<style>
ul{margin: 30px auto; width:1440px;}
ul li{float: left; padding-right: 20px; list-style: none;}
ul li img{width: 77px; height: 57px; padding: 6px; border: 1px solid #ccc; background-color:#eee; -webkit-border-radius: 8px;}
#tooltip-keleyi-com{
position: absolute;
background-color: #eee;
border: 1px solid #999;
width: 765px;
height: 590px;
-webkit-border-radius: 8px;
font-family: "微軟雅黑";
padding: 20px;
}
</style>
</head>
<body>
<div><a href="http:///a/bjac/h12vjfyv.htm" target="_blank">原文</a></div>
<div><ul>
<li><a href="http:///keleyi/phtml/image/img/bmw_m1_hood.jpg" title="1" class="tooltip-keleyi-com"><img src="http:///keleyi/phtml/image/img/bmw_m1_hood.jpg" alt="1" /></a></li>
<li><a href="http:///keleyi/phtml/image/img/bmw_m1_side.jpg" title="2" class="tooltip-keleyi-com"><img src="http:///keleyi/phtml/image/img/bmw_m1_side.jpg" alt="2" /></a></li>
<li><a href="http:///keleyi/phtml/image/img/bmw_m3_gt.jpg" title="3" class="tooltip-keleyi-com"><img src="http:///keleyi/phtml/image/img/bmw_m3_gt.jpg" alt="3" /></a></li>
<li><a href="http:///keleyi/phtml/image/img/corvette_pitstop.jpg" title="4" class="tooltip-keleyi-com"><img src="http:///keleyi/phtml/image/img/corvette_pitstop.jpg" alt="4" /></a></li>
</ul></div>
<div>提醒您：把光標移動到圖片上查看效果。</div>
</body>
</html>
代碼中用到捕捉鼠標位置的功能，請參考http:///a/bjac/8p1g5yeq.htm