鼠標移動，顯示大圖，在不少網站上都有這種需要，特別是Zol、360buy、Taobao等。平時顯示縮略圖，在用戶需要查看細節的時候，才顯示與此圖形匹配的大圖。使用jQuery實現非常方便。即先顯示小圖片，當用戶鼠標在小圖片上移動時，再根據進入、移除或在圖片上移動，而添加不同的處理事件，分別顯示、刪除或移動大圖片，其大致代碼如下：
1.定義所用到的樣式
1:
2: <style type="text/css">
3: *
4: {
5: margin: 0px;
6: padding: 0px;
7: }
8: img
9: {
10: border: 1px solid #CCCCCC;
11: }
12: #imgdiv /*新增加大圖樣式*/
13: {
14: margin: 0 auto;
15: border: 1px solid #0F0F0F;
16: padding: 80px;
17: width: 410px;
18: background: #FFFFFF;
19: display: none;
20: position: absolute; /* 這個對顯示鼠標的位置很重要，如果不是絕對位置的話，將顯示的地方不一樣*/
21: vertical-align: middle;
22: text-align: center;
23: font-family: Arial;
24: }
25: div#imgdiv p /*大圖下面的文字標題樣式*/
26: {
27: padding-top: 20px;
28: text-align: center;
29: }
30: ul
31: {
32: margin: 0 auto;
33: margin-left: 50px;
34: text-align: center;
35: width:100%;
36: }
37: li
38: {
39: list-style: none;
40: float: left;
41: text-align: center;
42: margin: 10px 10px 10px 10px;
43: }
44: li p
45: {
46: padding-top: 6px;
47: }
48: </style>
2.添加jQuery引用，並為圖片添加mouseover、mouseout和mousemove函數。
1: <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
2: <script type="text/javascript">
3: $(function () {
4: $("img").mouseover(function (e) {
5:
6: var s = $("<div id = 'imgdiv'><img src = " + this.src + " width = '300' height='300'/><p>" + this.title + "</p></div>");
7: $("body").append(s);
8: $("#imgdiv").css({
9: "top": (e.pageY + 20) + "px",
10: "left": (e.pageX + 10) + "px"
11: }).show("slow");
12:
13: }).mouseout(function () {
14: $("#imgdiv").remove();
15: }).mousemove(function (e) {
16:
17: $("#imgdiv").css({
18: "top": (e.pageY + 20) + "px",
19: "left": (e.pageX + 10) + "px"
20: });
21: });
22: });
23: </script>
其中mouseover也可以使用mouseenter函數替換，其效果一樣。
3.Html頁面代碼。
1: <body>
2: <ul>
3: <li><a href="">
4: <img src="Images/4.png" width="200" height="150" title="Nice girl" alt="Nice girl!" /></a><p>
5: Nice girl</p>
6: </li>
7: <li><a href="">
8: <img src="Images/1.PNG" width="200" height="150" title="Fangfang" alt="Fangfang!" /></a><p>
9: FangFang</p>
10: </li>
11: </ul>
12: </body>
4.顯示效果。
參考文獻：
[1] fivecent, 圖片提示－鼠標放在圖片上會顯示圖片的大圖上。