jQuery图片提示示例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>图片提示</title>
 6  <!--   引入jQuery -->
 7  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 8 <style type="text/css">
 9 body{margin:0;padding:40px;background:#fff;font:80%Arial,Helvetica,sans-serif;color:#555;line-height:180%;}
10 img{border:none;}
11 ul,li{margin:0;padding:0;}
12 li{list-style:none;float:left;display:inline;margin-right:10px;border:1px solid#AAAAAA;}#tooltip{position:absolute;border:1px solid#ccc;background:#333;padding:2px;display:none;color:#fff;}
13 </style>
14 <script type="text/javascript">
15 //<![CDATA[
16 $(function(){
17     var x = 10;
18     var y = 20;
19     $("a.tooltip").mouseover(function(e){
20         this.myTitle = this.title;
21         this.title = "";    
22         var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
23         var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
24         $("body").append(tooltip);    //把它追加到文档中                         
25         $("#tooltip")
26             .css({
27                 "top": (e.pageY+y) + "px",
28                 "left":  (e.pageX+x)  + "px"
29             }).show("fast");      //设置x坐标和y坐标，并且显示
30     }).mouseout(function(){
31         this.title = this.myTitle;    
32         $("#tooltip").remove();     //移除 
33     }).mousemove(function(e){
34         $("#tooltip")
35             .css({
36                 "top": (e.pageY+y) + "px",
37                 "left":  (e.pageX+x)  + "px"
38             });
39     });
40 })
41 //]]>
42 </script>
43 
44 </head>
45 <body>
46 <h3>有效果：</h3>
47     <ul>
48         <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
49         <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
50         <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
51         <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
52     </ul>
53 
54 
55 <br/><br/><br/><br/>
56 <br/><br/><br/><br/>
57 
58 
59 <h3>无效果：</h3>
60 <ul>
61         <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
62         <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
63         <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
64         <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
65     </ul>
66 </body>
67 </html>
posted on 2014-04-21 10:47 Shower稻草人阅读(256) 评论(0) 收藏举报