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

蔚落 2023-08-17 17:19 80阅读 0赞

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

这个效果的思路如下：

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

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

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

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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>

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

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

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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  
     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>

转载于:https://www.cnblogs.com/s-z-y/p/4357723.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20230808/93579a1facbb4b5b8ec533fb99de47d8.png