DOM操作在jQuery中的实用------文字提示和图片提示

关于文字提示想必是家喻户晓，操作呢说简单一点就是在超链接中加入title属性。但是在人机交互越来越倍受恩宠的年代，依靠浏览器自带的文字提示即title属性，提示效果的响应速度就（还是人艰不拆了吧~）so,要想有速度还是得靠自己一双手去写~

这个效果的思路如下：

A当鼠标滑入超链接：1创建一个<div>元素，<div>元素的内容为title属性的值

2将创建的元素追加到文档中

3为他设置横纵坐标，使他显示在鼠标位置的旁边

B当鼠标划出超链接时移除<div>元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>文字提示</title>
 6     <script src="../../scripts/jquery.js" type="text/javascript"></script>
 7     <style type="text/css">
 8         body{
 9             margin: 0;
10             padding: 40px;
11             background: #fff;
12             font: 100% Arial,Helvetica,sans-serif;
13             color: #555;
14             line-height: 180%;
15         }
16         p{
17             clear: both;
18             margin: 0;
19             padding: 10px 0;
20         }
21         #tooltip{
22             position: absolute;
23             border: 1px solid #333;
24             background: 1px;
25             padding: 1px;
26             color: #2cd6dc;
27             display: none;
28 
29         }
30         </style>
31     <script type="text/javascript">
32         $(function(){
33             var x=10;
34             var y=20;
35             $("a.tooltip").mouseover(function(e){
36                 this.myTitle=this.title;
37                 this.title="";
38                 var tooltip="<div id='tooltip'>"+ this.myTitle+" <\/div>";
39                 $("body").append(tooltip);
40                 $("#tooltip")
41                         .css({
42                             "top":(e.pageY+y)+"px",
43                             "left":(e.pageX+x)+"px"
44 
45                         }).show("fast");
46 
47 
48             }).mouseout(function(){
49                 this.title=this.myTitle;
50                 $("#tooltip").remove();
51             }).mousemove(function(){
52                 $("#tooltip")
53                         .css({
54                             "top":(e.pageY)+"px",
55                             "left":(e.pageX)+"px"
56                         });
57             });
58 
59 
60 
61 
62         })
63                 </script>
64 
65 </head>
66 <body>
67 <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
68 <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
69 <p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
70 <p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
71 </body>
72 </html>
View Code

话都说到这里了，不再说点关于图片提示效果的东西不好吧~

在文字提示的基础上我们稍作修改，高大上的图片提示效果秒现

 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.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 //<![CDATA[
42 $(function(){
43     var x = 10;
44     var y = 20;
45     $("a.tooltip").mouseover(function(e){
46         this.myTitle = this.title;
47         this.title = "";    
48         var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
49         var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
50         $("body").append(tooltip);    //把它追加到文档中                         
51         $("#tooltip")
52             .css({
53                 "top": (e.pageY+y) + "px",
54                 "left":  (e.pageX+x)  + "px"
55             }).show("fast");      //设置x坐标和y坐标，并且显示
56     }).mouseout(function(){
57         this.title = this.myTitle;    
58         $("#tooltip").remove();     //移除 
59     }).mousemove(function(e){
60         $("#tooltip")
61             .css({
62                 "top": (e.pageY+y) + "px",
63                 "left":  (e.pageX+x)  + "px"
64             });
65     });
66 })
67 //]]>
68 </script>
69 
70 </head>
71 <body>
72 <h3>有效果：</h3>
73     <ul>
74         <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
75         <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
76         <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
77         <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
78     </ul>
79 
80 
81 <br/><br/><br/><br/>
82 <br/><br/><br/><br/>
83 
84 
85 <h3>无效果：</h3>
86 <ul>
87         <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
88         <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
89         <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
90         <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
91     </ul>
92 </body>
93 </html>
View Code

 

posted @ 2015-03-22 18:22  如梦令szy  阅读(269)  评论(0)  编辑  收藏  举报