当鼠标移动到图片的不同位置,图片就向那个位置看

首先准备9张往不同方位看的图片

代码简单说明:

当鼠标移动到不同位置的时候,切换不同的背景图片

 1 <head>
 2     <title></title>
 3     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
 4     <style type="text/css">
 5         #tbList
 6         {
 7             margin:5px auto;
 8             width:380px;
 9             height:384px;
10             background-image:url(imgfun/normal.jpg);
11             border-collapse:collapse;
12         }
13     </style>
14     <script type="text/javascript">
15         $(function () {
16             var $tdIndex = $("#tbList td");
17             $("#tbList td").mouseover(function () {
18                 $("#tbList").css("background-image","url(imgfun/"+$tdIndex.index(this)+".jpg)");
19             });
20             
21         });
22     </script>
23 </head>
24 <body>
25     <table id="tbList">
26         <tr>
27             <td></td>
28             <td></td>
29             <td></td>
30         </tr>
31         <tr>
32             <td></td>
33             <td></td>
34             <td></td>
35         </tr>
36         <tr>
37             <td></td>
38             <td></td>
39             <td></td>
40         </tr>
41     </table>
42 </body>
43 </html>
代码文件

 

posted @ 2013-10-23 17:18  李亚杰  阅读(461)  评论(0)    收藏  举报