jQuery图片提示和文字提示

最新推荐文章于 2020-08-16 18:57:55 发布

weixin_33736649

最新推荐文章于 2020-08-16 18:57:55 发布

阅读量422

点赞数

文章标签： javascript xhtml ViewUI

原文链接：https://yq.aliyun.com/articles/377498

版权

图片提示:

效果如下:

 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="../js/jquery-1.4.2.js" type="text/javascript"></script>
 8 <style type="text/css">
 9 body{
10     margin:0;
11     padding:40px;
12     background:#fff;
13     font:80% Arial, Helvetica, sans-serif;
14     color:#555;
15     line-height:180%;
16 }
17 img{border:none;}
18 ul,li{
19     margin:0;
20     padding:0;
21 }
22 li{
23     list-style:none;
24     float:left;
25     display:inline;
26     margin-right:10px;
27     border:1px solid #AAAAAA;
28 }
29 
30 /* tooltip */
31 #tooltip{
32     position:absolute;
33     border:1px solid #ccc;
34     background:#333;
35     padding:2px;
36     display:none;
37     color:#fff;
38 }
39 </style>
40 <script type="text/javascript">
41         $(document).ready(function(){
42             var x = 10;
43             var y = 20;
44             
45             $("a[class=tooltip]").mouseover(function(e){
46                 //1 获取对应a标签的href属性
47                 var myHref = this.href;
48                 
49                 //2 创建标签进行图片提示
50                 var $div = $("<div id='tooltip'><img src='"+myHref+"'></img></div>");
51                 
52                 //3 添加到页面中(body标签下)
53                 $("body").append($div);
54                 
55                 //4 调整一下位置(相对鼠标的坐标值)
56                 $("#tooltip").css({
57                     top : e.pageY + y + "px",
58                     left : e.pageX + x + "px"
59                 }).show();
60                 
61             }).mouseout(function(){
62                 $("#tooltip").remove();
63             }).mousemove(function(e){
64                 $("#tooltip").css({
65                     top : e.pageY + y + "px",
66                     left : e.pageX + x + "px"
67                 })
68             });
69         });
70 </script>
71 
72 </head>
73 <body>
74 <h3>有效果：</h3>
75     <ul>
76         <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
77         <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
78         <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
79         <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
80     </ul>
81 
82 
83 <br/><br/><br/><br/>
84 <br/><br/><br/><br/>
85 
86 
87 <h3>无效果：</h3>
88 <ul>
89         <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
90         <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
91         <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
92         <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
93     </ul>
94 <!-- Resources from http://down.liehuo.net -->
95 </body>
96 </html>

文字提示:

 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="../js/jquery-1.4.2.js" type="text/javascript"></script>
 8 <style type="text/css">
 9 body{
10     margin:0;
11     padding:40px;
12     background:#fff;
13     font:80% Arial, Helvetica, sans-serif;
14     color:#555;
15     line-height:180%;
16 }
17 p{
18     clear:both;
19     margin:0;
20     padding:.5em 0;
21 }
22 /* tooltip */
23 #tooltip{
24     position:absolute;
25     border:1px solid #333;
26     background:#f7f5d1;
27     padding:1px;
28     color:#333;
29     display:none;
30 }
31 </style>
32 <script type="text/javascript">
33 //<![CDATA[
34 $(function(){
35     var x = 10;  
36     var y = 20;
37     $("a.tooltip").mouseover(function(e){
38            this.myTitle = this.title;
39         this.title = "";    
40         var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
41         $("body").append(tooltip);    //把它追加到文档中
42         $("#tooltip")
43             .css({
44                 "top": (e.pageY+y) + "px",
45                 "left": (e.pageX+x)  + "px"
46             }).show("fast");      //设置x坐标和y坐标，并且显示
47     }).mouseout(function(){        
48         this.title = this.myTitle;
49         $("#tooltip").remove();   //移除 
50     }).mousemove(function(e){
51         $("#tooltip")
52             .css({
53                 "top": (e.pageY+y) + "px",
54                 "left": (e.pageX+x)  + "px"
55             });
56     });
57 })
58 //]]>
59 </script>
60 </head>
61 <body>
62 <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
63 <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
64 <p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
65 <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
66 <!-- Resources from http://down.liehuo.net -->
67 </body>
68 </html>

本文转自SummerChill博客园博客，原文链接：http://www.cnblogs.com/DreamDrive/p/5780207.html，如需转载请自行联系原作者

weixin_33736649

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫