js-javascript-滑鼠懸停彈出大圖視窗的源代碼如下所示
<!DOCTYPE html>
<html >
<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實作滑鼠經過顯示大圖效果 keleyi.com" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br />" + this.myTitle + " 産品預覽圖" : "";
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='微信賬号：白雲機場交流論壇産品' width='765' height='574' />" + imgTitle + "</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function (e) {
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").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{
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://keleyi.com/a/bjac/h12vjfyv.htm" target="_blank" rel="external nofollow" target="_blank">原文</a></div>
<div><ul>
<li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" target="_blank" rel="external nofollow" title="微信賬号：白雲機場交流論壇1" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" alt="微信賬号：白雲機場交流論壇1" /></a></li>
<li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" target="_blank" rel="external nofollow" title="微信賬号：白雲機場交流論壇2" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" alt="微信賬号：白雲機場交流論壇2" /></a></li>
<li><a href="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" target="_blank" rel="external nofollow" title="微信賬号：白雲機場交流論壇3" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" alt="微信賬号：白雲機場交流論壇3" /></a></li>
<li><a href="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" target="_blank" rel="external nofollow" title="微信賬号：白雲機場交流論壇4" class="tooltip"><img src="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" alt="微信賬号：白雲機場交流論壇4" /></a></li>
</ul></div><div>提醒您：把光标移動到圖檔上檢視效果。</div>
</body>
</html>
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)